Форум Сайтостроение Веб-строительство

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

Dmitriy_2014
На сайте с 01.07.2014
Offline
329
Dmitriy_2014
461

Всем привет!

Есть обычный 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
На сайте с 27.10.2019
Offline
133
ArbNet
#1 


<!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
Google постепенно интегрирует элементы Как повлияет HTML5 на О склеивании слов в
Dmitriy_2014
На сайте с 01.07.2014
Offline
329
Dmitriy_2014
#2

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, то все работает без указания ширины.

Как повлияет HTML5 на Google об использовании нескольких Платон Щукин об условиях

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий