justify-content:space-between与flex-grow协调内容

Question

我有一个顶部水平导航,我正在使用css flexbox规则来控制间距.

我希望菜单中的第一个项目与左侧对齐,最后一个项目与右侧对齐,其余项目之间的间距相等.

这可能吗？我以为justify-content: space-between;会实现这个目标,但我无法让它发挥作用.

我举了一个关于我试图在jsfiddle上做的例子.我也把这个代码放在下面.

我能想到这样做的唯一的另一种方法是给一个text-align: center到每个的li元素,但在第一和最后一个,我可以给一个text-align: left和text-align: right而这将给第二和倒数第二个元素之间太多的空间.

.container{
  background-color: yellow;
  width: 1100px;
}
.container ul#nav {
  padding: 0;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.container ul#nav li {
  list-style: none;
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  flex: 2 1 auto;
  justify-content: space-between;
}
.container ul#nav li {
  justify-content: space-between;
}

<div class="container">
  <ul id="nav">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Kiwis</a></li>
  </ul>
</div>

Answer 1

问题是，即使一个元素的flex-grow > 0 ， justify-content的任何值都会自动停止生效，并且正的额外空间将分布在具有flex-grow的项目之间。

结论是：“所有Flex-items必须具有flex-grow: 0;才能使justify-content正常工作：。

在您的具体情况下，问题在于该行：flex: 2 1 auto;自动设置flex-grow: 2;

为了解决这个问题，只需使用代码行将flex-grow更改为0flex: 0 1 auto;

Answer 2

你可以通过删除实现这一目标flex: 2 1 auto;,从.container ul#nav li这样的:

.container{
  background-color: yellow;
  width: 1100px;
}
.container ul#nav {
  padding: 0;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.container ul#nav li {
  list-style: none;
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  justify-content: space-between;
}
.container ul#nav li {
  justify-content: space-between;
}

<div class="container">
  <ul id="nav">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Kiwis</a></li>
  </ul>
</div>