Почему может не работать flex-grow/margin-left: atuto при двойном display: flex?


Dmitriy_2014
401

Всем привет!

Есть обычный header в нем обычное меню списком:


<header>
<nav>
<ul class="spisok">
<li>Home</li>
<li class="push">about</li>
<li>info</li>
</ul>
</nav>
</header>

CSS:


header {
display: flex;
background-color: #fff287;
margin-bottom: 10px;
}

.spisok {
display: flex;
list-style-type: none;
}

.spisok li {
padding: 10px;
}

.push {
flex-grow:1;
/*margin-left: auto;*/
}

Почему-то если убрать display: flex у элемента header и оставить его только у ul списка все работает и flex-grow и можно отодвинуть margin-left: auto, но если оставить display: flex у header то все перестает работать, вроде же можно вложенные flex элементы внутри flex элемента делать.

Заранее всем спасибо за ответы!


ArbNet


<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<style>
header {
display: flex;
margin-bottom: 10px;
background-color: #fff287;
}
nav {
width: 90%;/* можно поставить 100% или в пикселях например 1280px */
margin: 0 auto;
}
.spisok {
margin: 0;
padding: 0;
display: flex;
list-style-type: none;
}
.spisok li {
padding: 10px;
min-width: 80px;
text-align: center;
}
.spisok li:hover:not(.push) {
cursor: pointer;
background-color: #8bf3b6;
}
li.push {
flex-grow:1;
}
li.push2 {
padding-left: 32px;
flex-grow:1;
text-align: left;
}
</style>
<body>
<header>
<nav>
<ul class="spisok">
<li>Home</li>
<li>about</li>
<li class="push"></li>
<li>info</li>
</ul>
</nav>
</header>
<hr>
<header>
<nav>
<ul class="spisok">
<li>Home</li>
<li class="push2">about</li>
<li>info</li>
</ul>
</nav>
</header>
</body>
</html>
  • Зачем элементу 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, то все работает без указания ширины.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *