Sie versuchen, ein mehrzeiliges Flex-Layout zu erreichen, bei dem Elemente horizontal fließen, wenn vertikal nicht genügend Platz vorhanden ist . Es treten jedoch Lücken zwischen den Spalten auf.
Die Anfangseinstellung für Flex-Container ist align-content: stretch. Dadurch werden flexible Artikel gleichmäßig über die Querachse eines mehrzeiligen Containers verteilt. Um dieses Verhalten zu verhindern, wenden Sie align-content: flex-start auf den Container an.
Bei der Arbeit mit einzeiligen Flex-Containern verwenden Sie align-items und align-self, um den Platz entlang der Querachse zu verteilen. In mehrzeiligen Containern, wie in Ihrem Fall, verwenden Sie jedoch die Eigenschaft align-content, um Flexlinien (Zeilen oder Spalten) entlang der Querachse zu verteilen.
Die Eigenschaft align-content akzeptiert verschiedene Werte, einschließlich:
Standardmäßig ist der Wert „Stretch“, was „Rest“ bedeutet Der freie Speicherplatz wird gleichmäßig auf alle Zeilen aufgeteilt, wodurch sie sich ausdehnen.
Lösung
Um die Lücken zwischen den Spalten in Ihrem Codebeispiel zu beseitigen, ändern Sie das CSS:
.container { align-content: flex-start; }
Fazit
Die Verwendung von align-content: flex-start stellt sicher, dass flexible Linien vorhanden sind Beginnen Sie an der Oberseite des Behälters und setzen Sie sich ohne zusätzliche Lücken nach unten fort. Dies entspricht dem beabsichtigten Layout, das Sie gesucht haben.
Das obige ist der detaillierte Inhalt vonWie entferne ich Lücken zwischen flexiblen Artikeln beim Wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!