Ich habe eine flexbasierte ungeordnete Liste von Social Media-Symbolen am unteren Rand eines mobilen Menüs auf meiner Website.

Ich versuche, Dreierreihen in gleichem Abstand nebeneinander zu stellen. Das habe ich mit der regel geschafft

justify-content:space-around

aber Mein Problem ist, dass wenn es mehr als drei Elemente gibt, die nächste Zeile von der Mitte aus aufgefüllt wird, während ich möchte, dass sie von links aufgefüllt wird, wenn der Benutzer im Laufe der Zeit weitere Symbole hinzufügt.

Je weiter ich mit der Erklärung komme, desto unsicherer bin ich, ob dies überhaupt möglich ist, aber ich dachte, ich würde es für alle Fälle rausschmeißen.

Ist es möglich, die Listenelemente in der nächsten Zeile links vom Container zu beginnen, ohne das @ zu verfälschejustify-content:space-around rule?

Im Moment treten sie nur an, wenn in beiden Reihen drei stehen.

Hier ist der Code

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