Wie machen Sie die Trennung zwischen Elementen konsistent?

Question

Ich versuche, meine Elemente so zu stylen, dass sie ungefähr so ​​aussieht. (Die quadratischen Elemente sollten alle gleich groß sein)

Aber was am Ende passiert sind folgende:

Das ist mein CSS-Code für den Behälter und Elemente:

.container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    height: 400px; 
} 

.element { 
    width: 80px; 
    height: 80px; 
    background-color: white; 
} 

Answer 1

Fügen Sie align-content: flex-start zum .container Stil hinzu.

Dies richtet einen Flex-Container Linien innerhalb wenn es mehr Platz in der Querachse, ähnlich wie justify-content richtet einzelne Positionen innerhalb der Hauptachse.

More info about align-content.