Eu tenho uma lista não ordenada baseada em flex de ícones de mídia social na parte inferior de um menu para celular no meu site.

Estou tentando fazer com que as filas de três fiquem lado a lado, a uma distância igual. Eu consegui isso com a regra

justify-content:space-around

masmeu problema é que, quando há mais de três itens, a próxima linha começa a encher a partir do centro, enquanto eu gostaria que a encher a partir da esquerda conforme o usuário adiciona mais ícones ao longo do tempo.

Quanto mais eu explico isso, mais inseguro sou se isso é possível, mas pensei em lançá-lo lá fora por precaução.

É possível fazer com que os itens da lista na próxima linha iniciem da esquerda do contêiner sem atrapalhar ojustify-content:space-around regra?

No momento, eles só se alinham quando há três nas duas linhas.

Aqui está o código

.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>