css - 为什么 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 添加到 flex 容器而不是元素本身之外，还有一件事要记住；确保容器内没有空元素(如空 div 或 :after)。

在我的例子中，在 flex 之前的日子里，当 float 元素完成时，JS 添加了一个空的 div 作为“clearfix”。

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