Flexbox reaktionsschnelle Layoutausrichtung

Question

Probleme mit der Flexbox, ein Layout korrekt reagieren zu lassen.

Stellen Sie sich eine Seite vor, die nur einige Panels enthält. Das Ziel ist, eine x-Menge der Verkleidungen/Reihe zu zeigen, ausgerichtete horizontale & Vertikale als die anderen.

Das Problem Ich bin derzeit mit der Ausrichtung konfrontiert, wenn ein Panel von Zeile wechselt. Versuchen Sie, ein Panel gerade unter dem obigen auszurichten, aber das funktioniert überhaupt nicht.

Meine bisherigen Ergebnisse:

Desktop-

Tablet(hier finden Sie das Problem in Ausrichtung sehen (sollte ich direkt unter dem oben links sein. ..))

Telefon

-Code(vereinfacht)

<div class="container"> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div> 

-

.container { 
    display: flex; 
    flex-flow: row wrap; 
    max-width: 960px; 
    justify-content: space-around; 

    .item { 
    margin-top: 24px; 
    width: 264px; 
    height: 183px; 
    background: red; 
    } 
} 

Answer 1

versuchenstatt space-around für .container