Как центрировать заголовок относительно двух блоков во Флексах?

Question

[Raul Abdullin]

Я наверное уже достал с этими заголовками, но действительно уже голова кругом.
Разбил часть с заголовком и часть с виджетами на два дива. Создал для них флекс контейнер и сделал колонки сверху вниз flex-direction: column; Для блока с заголовком задал flex-grow: 3; А для пустова дива flex-grow: 2; Вот скрин что получается take.ms/6kMIj Как теперь центрировать заголовок Interview относительно двух виджетов Head и Ex Director? :) Я запутался :)
Посмотрите код пожалуйста https://jsfiddle.net/raulvo/krh2tnkr/
Дизайн макета https://dribbble.com/shots/3962898-Kanban-Board/at...

Comments

[Антон Спирин]

От чего у вас идет кругом голова, если вы вместо того чтобы потратить время и разобраться сыплете вопросами, которые даже не удосуживаетесь нормально сформулировать? Я вам в прошлом вашем вопросе советовал, что и где почитать про flex.
Я уверен, что вы даже не удосужились разобрать и проанализировать, ни один мой пример кода в ответе на ваш вопрос. Просто сидите и ждете готовенькое. Так нельзя. В спецификации flex пара часов разобраться, чтобы вопросов вообще не возникало.
Я искренне сочувствую вашему заказчику.

Простое решение вашего вопроса:
Уберите flex-grow в .for_title .main_title и .for_title .spacing

.for_title .main_title {
  flex: 0 0 40%;
  max-width: 40%;
}

.for_title .spacing {
  flex: 0 0 60%;
  max-width: 60%;
}

Answer 1

[Максим]

вынести надо было за flex - так проще : https://codepen.io/MaximLensky/pen/VrGymy

Comments

[Raul Abdullin]

Интервью должно центрироваться относительно 2х блоков Head и Ex Director. В вашем случае заголовок центрируется относительно всех 5ти блоков.

[Максим]

raulvodov, значит сделать обёртку для заголовка и точно по размеру тех самых двух блоков в сумме и всё

[Raul Abdullin]

Максим Ленский, это я и пытаюсь сделать, вот только почему-то в данном случае flex-grow: 2 не срабатывает(

[Максим]

raulvodov, а вы вообще его блочным сделайте - без флекса ... вынесите его за флекс контейнер

[Максим]

raulvodov, а вообще макет лучше нарисуй и покажи - что должно и как выглядеть !

[Raul Abdullin]

Максим Ленский, макет https://dribbble.com/shots/3962898-Kanban-Board/at...

[Максим]

raulvodov, https://jsfiddle.net/krh2tnkr/1/ я не совсем понял - но так или нет ?

[Raul Abdullin]

Максим Ленский, супер, спасибо огромное прям то что нужно. Не могли бы вы вкратце объяснить, что сделали. И из-за колонки на таком огромном расстоянии от заголовка, видимо контейнер для заголовка занимает определенную высоту?