Как верстать подобные непропорциональные блоки флексами?

Question

[fadveh]

Привет. Подскажите пожалуйста, как верстать адаптивно подобные непропорциональные блоки (в данном случае Header)?

Скриншот

Верстаю через флексы. Расстояние между логотипом и центральным блоком равно 170px, а между центральным и профилем - 310px, следовательно justify-content: space-between сразу отпадает.
Центральному блоку можно задать margin-right: auto чтобы отодвинуть блок профиль к краю, но вот как лучше адаптивно отодвинуть центральный блок от логотипа?
Извиняюсь за глупый вопрос, я новичок.
Ссылка на Codepen

Comments

[html-css]

в css grid можно выставлять фиксированные значения в перемешку с фракционными

[Kotovasofa]

html-css, flex-box более предпочтителен, css-grid не имеет еще настолько большую поддержку на can i use, как у флексов

Answer 1

[Kotovasofa]

space-beetween иspace-around отлично подходит и смотрится, когда у вас элементы блока одинакового размера(допустим элементы меню nav.

Как можно сделать - >

a.header-logo>Dashboard - ваш логотип.
div.header-notification> обертка для строки поиска, уведомления и писем, в ней вы элементы выравниваете как раз флексами, допустим space-beetween.
div.header-account> Hi, Robert - ваш блок с аккаунтом.

Далее, если вы используете сетку на чистых флексах - можете указать размеры блоков с помощью flex-basis(размер блока), илиflex-grow(жадность блоков).

Посмотрите примеры в сети, с использованием basis и grow. Понять их очень легко.

PS: Пример 2. Ставите flex-basis 25% блок логотипа, flex-basis 15% - блоку аккаунта, flex-grow: 1 - блоку с уведомлениями, выравнивание элементов блока -

justify-content: flex-start; - лого и уведомления, flex-end - аккаунт

Либо - calc - Использование calc в верстке

Comments

[fadveh]

Спасибо за развернутый ответ, сейчас потренируюсь

[Kotovasofa]

fadveh, не за что. Если ваш дизайн выполнен по сеткам, можете взять сетку bootstrap(только сетку без доп. модулей), и это будет в 3 раза быстрее. Чистые флексы используются - когда шаблон очень нестандартный.