Как правильно сверстать такой Header?

Question

[Demigodd]

ссылка на CodePen

Как вообще правильно сверстать такой дизайн ? Нужно ли блокам дать position ?
Как у Logo и Menu сделать ровный Height ? А Center их Height + 0.5.

Нужно ли им дать фиксированный Height или пусть они возьмут Height своего контента ?

Comments

[Ankhena]

Задать правильный align-items или align-self.

[Demigodd]

Ankhena, Задал как мог, не получилось.
Можете скинуть пример с Codepen ?
https://codepen.io/anon/pen/bzGXYq

Просто как сделать так что бы Logo и Menu не зависили от Центрального блока если я задам Centr → height: 100px то, Logo и Menu не растянулись,
но если я задам Logo → height: 200px то Menu тоже получил бы 200px. То есть они будут связаны между собою но не с Центральным блоком.

[Ankhena]

DEATH2298, если так, абсолютом https://codepen.io/anon/pen/GzgRvz то лого и меню будут всегда одинаковой высоты, а центр на 50% выше.

[Demigodd]

Ankhena, То есть либо абсолютом либо задать им фиксированную высоту иного варианта нету ?
Просто абсолютом, не лучшее решение...

[Ankhena]

DEATH2298, можно гридами https://codepen.io/anon/pen/PVwadQ

[Demigodd]

Ankhena, Спасибо то что нужно)
Я думал Grid похож на Flex, все что можно Grid`om можно и Flex`ом, как же я ошибался...

[Ankhena]

DEATH2298, нееее, гриды куда как увлекательнее

Answer 1

[Demigodd]

Спасибо Ankhena за ответ.
(Комментарий к вопросу)

DEATH2298, можно гридами https://codepen.io/anon/pen/PVwadQ

Answer 2

[ma4t]

засунуть их в див, которому задать
display: flex; justify-content: space-between;

и убрать у html и body margin и padding

что значит ровный height? Пишешь им один height и будет он ровный у обоих

Comments

[Demigodd]

А как увеличить высоту центрального блока ? Без вреда для других..

[ma4t]

почему им нанесется вред? это отдельные див блоки.
Создаешь Див, в нем еще три дива, каждому пишешь свою ширину и высоту