Heim > Web-Frontend > CSS-Tutorial > Wie entferne ich Lücken zwischen flexiblen Artikeln beim Wickeln?

Wie entferne ich Lücken zwischen flexiblen Artikeln beim Wickeln?

DDD
Freigeben: 2024-12-31 03:04:10
Original
426 Leute haben es durchsucht

How to Remove Gaps Between Flex Items When They Wrap?

Entfernen Sie den Abstand zwischen flexiblen Elementen beim Umwickeln

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:

  • Flex-Anfang
  • Flex-Ende
  • Mitte
  • Raum-zwischen
  • Raum-um
  • Stretch

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage