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

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

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>