Wie entferne ich Lücken zwischen Flexbox-Spalten nach dem Umbrechen?

Entfernen Sie den Abstand zwischen Flex-Elementspalten nach dem Umbrechen

Wenn Sie Flexbox verwenden, um Spalten mit Elementen in einem Container mit einer festgelegten Höhe zu erstellen, können Sie dies tun Beim Umbruch in eine neue Zeile treten unerwünschte Lücken zwischen den Spalten auf. Dieses Problem tritt aufgrund der Standardeinstellung von align-content: stretch auf.

Align-content bestimmt die Verteilung mehrerer Zeilen von Flex-Elementen entlang der Querachse. Bei der Dehnungseinstellung verteilen sich die Flexlinien gleichmäßig über den verfügbaren Raum. Um dieses Verhalten zu überschreiben und die Lücken zu entfernen, können Sie align-content: flex-start auf den Container anwenden.

Im Gegensatz zu einzeiligen Flex-Containern sind mehrzeilige Flex-Container (flex-wrap: wrap) Verwenden Sie die Eigenschaft align-content, um flexible Linien zu verteilen. Gemäß der Flexbox-Spezifikation hat align-content die folgenden sechs Werte:

• flex-start
• flex-end
• center
• space -zwischen
• Raum-um
• strecken (Standard)

Stretch ermöglicht es den Flexlinien, sich auszudehnen und den verbleibenden Raum zu füllen. Wenn negativer Freiraum vorhanden ist, verhält sich Stretch wie Flex-Start, während es in allen anderen Fällen den Raum gleichmäßig auf die Linien aufteilt.

Durch die Einstellung von align-content: Flex-Start richten Sie die Flex-Linien aus bis zum Anfang der Querachse, wodurch alle Lücken zwischen den Säulen effektiv entfernt werden. Dadurch erhalten Sie das gewünschte Ergebnis: Gegenstände sind ordentlich untereinander aufgereiht und füllen den verfügbaren Platz aus.

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