包裹时，弹性项目应左对齐，而不是居中对齐

Question

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

我正在尝试让三排并排坐，等距离分开。我已经用规则来解决了

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-around使用justify-content: space-between。

说明

看一下flexbox规范：

*8.2。 轴对齐：justify-content属性

该justify-content属性使flex项目沿着flex容器当前行的主轴对齐。有五个适用于的值justify-content。这是其中两个：

space-around

伸缩项均匀地分布在行中，两端留有一半大小的空格。

如果剩余的自由空间为负或在线上只有一个弹性项目，则此值等于center。

强调我的。那就是你的问题。

现在检查space-between：

space-between

弹性物料均匀地分布在生产线上。

如果剩余的自由空间为负或在线上只有一个弹性项目，则此值等于flex-start。

因此，要在包装上将弹性商品左对齐，请使用space-between。

然后，如有必要，您可以向容器中添加一些左右填充以进行模拟space-around。

当然，您将面临的下一个问题是 两个 项目包装在一起，并且每个项目在相对的两端对齐。