Почему-то если убрать display: flex у элемента header и оставить его только у ul списка все работает и flex-grow и можно отодвинуть margin-left: auto, но если оставить display: flex у header то все перестает работать, вроде же можно вложенные flex элементы внутри flex элемента делать.
Зачем элементу header делать flex если в нём нет других элементов кроме nav которые надо выравнивать?
Лучше не растягивать пункт about, будет выглядеть не красиво при наведении будет большая растянутая полоса. Я продублировал ниже для примера.
У вас не работало потому что вы не задавали ширину элементам nav и ul
Dmitriy_2014
ArbNet,
Спасибо! Да точно, после установки ширины в 100% для элемента nav, стали работать и flex-grow и margin-left для li элементов и для ul заработали justify-content в виде space-between, space-around и т.п. При этом свойство display: flex остается и для header.
1. Это хороший вопрос и я не знаю что на него ответить, я просто не думал что это проблема, на сайте Mozilla для разработчиков — https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
Написано:
Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками.
Я думал, что можно это свойство назначать всему подряд где хочется применять выравнивания и расстановку в стиле flexbox.
2. Так я и хотел, как бы отодвинуть по разные стороны элементы.
3. Да про ширину я не подумал, т.к. сбило то что если убрать display: flex у header, то все работает без указания ширины.
Dmitriy_2014
Всем привет!
Есть обычный header в нем обычное меню списком:
CSS:
Почему-то если убрать display: flex у элемента header и оставить его только у ul списка все работает и flex-grow и можно отодвинуть margin-left: auto, но если оставить display: flex у header то все перестает работать, вроде же можно вложенные flex элементы внутри flex элемента делать.
Заранее всем спасибо за ответы!
ArbNet
Dmitriy_2014
ArbNet,
Спасибо! Да точно, после установки ширины в 100% для элемента nav, стали работать и flex-grow и margin-left для li элементов и для ul заработали justify-content в виде space-between, space-around и т.п. При этом свойство display: flex остается и для header.
1. Это хороший вопрос и я не знаю что на него ответить, я просто не думал что это проблема, на сайте Mozilla для разработчиков — https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
Написано:
Я думал, что можно это свойство назначать всему подряд где хочется применять выравнивания и расстановку в стиле flexbox.
2. Так я и хотел, как бы отодвинуть по разные стороны элементы.
3. Да про ширину я не подумал, т.к. сбило то что если убрать display: flex у header, то все работает без указания ширины.