Как сверстать данное меню на флексах?

Question

[olya_097]

Answer 1

[Андрей]

задай среднему элементу ширину и сделай

display:flex;
justify-content:space-between

Comments

[olya_097]

типа предлагаешь кинуть лого в ul?
а если в условном тз написано делать лого отдельно? как выровнять?

[Андрей]

olya_097, не обязательно лого в меню помещать можно либо под него сделать элемент пустой а уже абсолютно потом по центру лого поместить. либо же разделить меню на две части (левую и правую) и абсолютом тоже поместить

[olya_097]

Андрей, а если помещу в ul?
не критическая ошибка будет?

[Андрей]

olya_097, нет. это по большому счету тоже элемент навигации ведущий на главную

[olya_097]

olya_097, но по идее врядли
а если для адаптива должно оставится лого и меню скрытое
то как делать?

[Андрей]

olya_097, тогда варианты выше я написал

[olya_097]

Андрей, а если делать отдельное меню для мобильного,
это скрывать, мобильное показывать

то можно любой способ верстки брать?

[Андрей]

olya_097, тогда да любой

[olya_097]

Андрей, только вопрос
так а как быть с лого? если оно будет в списке ul
тогда ж весь список пропадет
то опять лого добавлять для мобилки?

[Андрей]

olya_097, либо заново добавлять ибо скрывать все элементы кроме того в котором логотип и позиционировать его

[olya_097]

Андрей, а не лучше ли здесь подходит спей ераунд?

[Андрей]

тогда не сможешь контролировать крайние отступы по макету

[Ankhena]

olya_097, В основном ТЗ также написано и про ширину пунктов и про их выравнивание ;)

Answer 2

[Adik Izat]

space-between + padding-right/left. Чтобы края менюшки при изменении вьюпорта были красивые. Просто сделай пять пунктов меню. 3-ий пункт меню оставь пустым(тот, который останется под лого). А картинку по центру поставь через abbsolute; top: 0;
left: calc(50% - ( *ширина картинки* / 2 ) )