Wie kann ich Flexbox-Elemente in mehrere Zeilen umbrechen lassen und dabei die proportionale Größe beibehalten?

Flexbox: Elemente in mehreren Zeilen anzeigen

In Flexbox kann es eine Herausforderung sein, ein Layout mit mehreren Zeilen zu erreichen. Stellen Sie sich ein Szenario vor, in dem erwartet wird, dass acht Elemente ihre Größe dynamisch ändern und in zwei Zeilen ausgerichtet werden, mit vier Elementen pro Zeile. Um dieses Problem zu beheben, sind einige wichtige Anpassungen erforderlich.

Stellen Sie zunächst sicher, dass „Flex-Wrap“ auf „Wrap“ am Containerelement eingestellt ist. Dadurch wird die standardmäßige Nowrap-Einstellung außer Kraft gesetzt, sodass Elemente in mehrere Zeilen aufgeteilt werden können.

Die größte Hürde liegt jedoch in der Eigenschaft „flex-grow: 1“, die den Flex-Elementen zugewiesen ist. Während diese Eigenschaft den verfügbaren Platz proportional verteilt, kann sie das Umschließen behindern. Da die Flex-Elemente keinen Inhalt enthalten, werden sie auf die Breite Null verkleinert und bleiben in einer einzelnen Zeile.

Die Lösung besteht darin, eine Breite für die Elemente anzugeben. Durch Anwenden von Flex: 1 0 21 %; werden die Artikel:

• Flex: 1 – Flex-Artikel werden gebogen, um den verfügbaren Platz auszufüllen.
• 0 – Flex-Elemente haben eine Mindestbreite von Null, was ihnen dies ermöglicht schrumpfen.
• 21 % – Flexible Artikel haben eine bevorzugte Breite von 21 %, um sicherzustellen, dass sie den Inhalt aufnehmen und sich gleichmäßig im Behälter verteilen.

Das obige ist der detaillierte Inhalt vonWie kann ich Flexbox-Elemente in mehrere Zeilen umbrechen lassen und dabei die proportionale Größe beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!