为什么 flexbox space-between 不起作用？

Question

我正在尝试实现 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 容器的右侧齐平。欢迎任何帮助。

Answer 1

还有一点要记住，除了需要将justify-content:space-between 添加到弹性容器而不是元素本身之外；确保容器内没有空元素（例如空的 div 或 :after）。

在我的例子中，从 flex 之前的日子开始，当事情完成浮动元素时，JS 添加了一个空 div 作为“clearfix”。

justify-content:space-between 将证明容器内的所有元素，即使是那些没有内容的元素，这会弄乱对齐和换行。

Answer 2

Flex 属性分为两类：flex 容器和 flex 项。

某些属性仅适用于容器，其他属性仅适用于项目。

justify-content 属性仅适用于弹性容器。

在您的代码中，justify-content 应用于项目，因此它没有任何效果。

将其重新分配给容器。

当然，一个元素既可以是弹性容器，也可以是项目，在这种情况下，所有属性都适用。但这里不是这样。 li 元素只是弹性项目，将忽略容器属性。

有关 flex 属性列表 - 按容器和项目划分 - 请参阅：A Complete Guide to Flexbox

Answer 3

问题是您应该在具有display: flex 属性的元素上设置justify-content: space-between;，或者更好地在“父”上设置，这样“子”元素将与彼此之间的空格对齐。

.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;
}