环绕时，Flex 项目应左对齐，而不是居中

Question

我的网站移动菜单底部有一个基于 flex 的社交媒体图标无序列表。

我试图让三排并排坐下，相距相等。我已经用规则管理了这个

justify-content:space-around

但是我的问题是，当超过三个项目时，下一行从中心开始填充，而我希望它从左侧填充 随着时间的推移，用户会添加更多图标。

我解释得越深入，我就越不确定这是否可能，但我想我会把它扔在那里以防万一。

是否可以让下一行中的列表项从容器的左侧开始，而不会弄乱justify-content:space-around 规则？

目前他们只有在两排都有三个时才排队。

这是代码

.box {
  width:275px;
  height:275px;
  background-color:yellow;
}

ul { 
  width:auto;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  flex-wrap: wrap;
  padding: 30px 20px 30px 20px;
  list-style: none; 
}

li {
  width:30px;
  height:30px;
  margin:15px;
  background-color:red;
}

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

</div>

Answer 1

解决方案

用justify-content: space-between代替justify-content: space-around。

---

说明

看看 flexbox 规范：

8.2. Axis Alignment: the justify-content property

justify-content 属性沿主轴对齐弹性项目 flex 容器的当前行。

有五个值适用于justify-content。以下是其中两个：

space-around

弹性项目均匀分布在行中，有一半大小的空格 在任一端。

如果剩余的可用空间为负数或有 行上只有一个弹性项目，此值与 center.

强调我的。这就是你遇到的问题。

现在查看space-between：

space-between

弹性项目均匀分布在行中。

如果剩余的可用空间为负数或行上只有一个 flex 项，则此值与 flex-start 相同。

因此，要在 wrap 上左对齐您的 flex 项目，请使用 space-between。

然后，如果需要，可以在容器中添加一些左右内边距来模拟space-around。

---

当然，您将面临的下一个问题是当 两个 项目包装，并且每个项目在相反的两端对齐。 But that's another question altogether :-)

Answer 2

原生的 flexbox 是不可能的……或者任何其他的布局方法。有一些变通方法，但没有这些..不是真的。

但是，如果知道可能的额外个剩余物品的数量（在本例中为 2），您可以添加隐藏物品以使事情变得更平......我说过这很hacky。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box {
  width: 275px;
  height: 175px;
  background-color: yellow;
}
ul {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 30px 20px 30px 20px;
  list-style: none;
}
li {
  width: 30px;
  height: 30px;
  margin: 15px;
  background-color: red;
}
.hidden {
  opacity: 0;
  height: 0;
}

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

Answer 3

删除 li 标签上的边距。

也不要忘记 ul 和 li 具有浏览器应用的默认样式。考虑使用css reset 在所有浏览器中保持一致性。