Почему flexbox пробел между не работает?

Я пытаюсь реализовать flexbox, но не могу заставить его работать. Что мне не хватает? У меня есть все префиксы поставщика flexbox на месте.

.main-navigation ul { 
   width:100%; 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
   display: -ms-flexbox;  /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  }

.main-navigation ul li {
   justify-content:space-between; 
   width:100px; 
   background:#666; 
   display:block;
 }

Цель состоит в том, чтобы левая часть li оставалась на одном уровне с левой частью контейнера ul, а самая правая часть li - для выравнивания с правой стороны контейнера ul. Любая помощь приветствуется.

Ответы

Ответ 1

Проблема заключается в том, что вы должны установить justify-content: space-between; на элемент с свойством display: flex или лучше сказать "родительский", поэтому элементы "child" будут выровнены с пространством между собой.

.main-navigation ul { 
  width: 100%; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.main-navigation ul li {
  width: 100px; 
  background: #666; 
  display: block;
}

Ответ 2

Свойства Flex делятся на две категории: контейнер flex и элементы гибкости.

Некоторые свойства применяются только к контейнеру, другие свойства относятся только к элементам.

Свойство justify-content применяется только к контейнеру flex.

В вашем коде, justify-content применяется к элементам, поэтому он не имеет эффекта.

Переустановите его в контейнер.

Конечно, элемент может быть как контейнером flex, так и элементом, и в этом случае применяются все свойства. Но это не так. Элементы li являются исключительно гибкими элементами и будут игнорировать свойства контейнера.

Список свойств flex – разделен на контейнер и предметы – см.: Полное руководство по Flexbox

Ответ 3

Еще одна вещь, о которой нужно помнить, помимо необходимости добавления justify-content:space-between в контейнер flex, а не для самих элементов; Убедитесь, что в контейнере нет пустых элементов (например, пустой div).

В моем случае оказалось, что JS добавляет пустой div как "clearfix" из дней до flex, когда делались плавающие элементы.

justify-content:space-between будет оправдывать все элементы внутри контейнера, даже те, у которых нет содержимого, что может испортить выравнивание и упаковку.