Css 为什么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容器的右侧齐平。欢迎任何帮助。

问题是您应该设置

调整内容：间隔display:flex

property或更好地说是“parent”属性对元素进行编码>，因此“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;
}

---

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

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

该属性仅适用于flex容器。

在您的代码中，

justify content

应用于项目，因此它没有任何效果

将其重新分配给容器

当然，元素可以是flex容器和项，在这种情况下，所有属性都适用。但事实并非如此。

li

元素仅为弹性项，将忽略容器属性

---

要查看flex属性列表（按容器和项目划分），请参阅：

除了需要添加

justify content之外，还要记住一件事：将
之间的空间添加到flex容器，而不是元素本身；确保容器中没有空元素（如空的
div
或
：after
）

在我的例子中，一个JS添加了一个空div作为“clearfix”，这是在flex之前的几天，当时事情是通过浮动元素完成的

justify content:space-between
将为容器内的所有元素（即使是没有内容的元素）进行对齐和包装。
您能创建一个演示吗？您确定在rule@alySebastien之间的空格中没有遗漏供应商前缀吗？谢谢。看起来我在规则之间的空格中缺少供应商前缀。：）感谢您指出flex容器中的伪元素可能导致的问题，在计算布局时，它们确实会被考虑在内。顶部答案，仍然解决此类问题。谢谢。这真的帮了我的忙。这是我的问题。Pseudo：在“clearfix”元素之后。把它钉在ccrez上。