Wie entferne ich Lücken zwischen Spalten in einem Flexbox-Layout beim Umbrechen?

Leerzeichen (Lücken) zwischen mehreren Zeilen von Flex-Elementen entfernen, wenn sie umgebrochen werden

Das Problem: Lücken zwischen Spalten

Bei Verwendung von Flexbox zum Erstellen eines Bei einem Container mit mehreren Spalten mit Elementen kann es zu Lücken zwischen den Spalten kommen. Dies liegt daran, dass die Anfangseinstellung eines Flex-Containers „align-content: stretch“ lautet, wodurch mehrere Zeilen von Flex-Elementen gleichmäßig entlang der Querachse verteilt werden.

Um diese Lücken zu beseitigen, passen Sie die Eigenschaft „align-content“ auf „flex-“ an. Start.

Align-Content verstehen

Beim Arbeiten mit einzeiligen Flex-Containern (d. h. flex-wrap: nowrap): die zu verwendenden Eigenschaften Zur Raumverteilung entlang der Querachse dienen align-items und align-self. In mehrzeiligen Flex-Containern (d. h. flex-wrap: wrap), wie dem in der Frage, muss jedoch die Eigenschaft align-content verwendet werden, um Flex-Linien (Zeilen/Spalten) entlang der Querachse zu verteilen.

Einstellen von align-content: flex-start

Durch Anwenden von align-content: flex-start auf den Flex-Container werden die Flexlinien am Anfang der Querachse ausgerichtet, wodurch Unerwünschtes eliminiert wird Lücken zwischen den Spalten.

Das obige ist der detaillierte Inhalt vonWie entferne ich Lücken zwischen Spalten in einem Flexbox-Layout beim Umbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!