Wie kann ich flexible Artikel mit gleicher Breite über mehrere Zeilen hinweg erreichen?

Aufrechterhaltung der gleichen Breite von Flex-Elementen beim Umbrechen

In CSS wird ein Layout erreicht, bei dem Flex-Elemente auch nach dem Umbrechen in neue Zeilen die gleiche Breite beibehalten , kann eine Herausforderung sein.

Flexbox verwenden

Mit Flexbox: Während es möglich ist, Elemente so zu konfigurieren, dass sie dynamisch wachsen, um die Breite des Containers auszufüllen, gibt es keine integrierte Funktion, um sicherzustellen, dass alle Elemente die gleiche Breite haben, insbesondere in der letzten Reihe. Diese Einschränkung ergibt sich aus dem aktuellen Umfang der Flexbox-Spezifikation.

Alternativer Ansatz: Rasterlayout

Grid Layout, eine weitere CSS3-Technologie, bietet eine flexiblere Lösung für Last- Zeilenausrichtung. Durch die Verwendung der Grid-Template-Columns-Eigenschaft ist es möglich, Elemente gleichmäßig zu verteilen, auch wenn sie in mehrere Zeilen umgebrochen werden.

Implementierung

Um das gewünschte Layout zu erreichen :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

Dieser Code erstellt ein Raster mit automatischer Spaltenverteilung basierend auf der verfügbaren Breite. Jede Spalte kann ein oder mehrere flexible Elemente mit einer Mindestbreite von 100 Pixeln und einer flexiblen Breite enthalten, die wächst, um den verbleibenden Platz in der Spalte auszufüllen. Die Eigenschaft „grid-auto-rows“ legt die Höhe jeder Zeile auf 20 Pixel fest, und „Grid-Gap“ fügt 5 Pixel Abstand zwischen den Elementen hinzu.

Fazit

Während Flexbox ein Obwohl es sich um ein leistungsstarkes Layout-Tool handelt, erschweren seine derzeitigen Einschränkungen die gleichmäßige Breitenausrichtung in der letzten Zeile. Grid Layout bietet mit seinen erweiterten Funktionen eine zuverlässige Lösung für dieses Szenario.

Das obige ist der detaillierte Inhalt vonWie kann ich flexible Artikel mit gleicher Breite über mehrere Zeilen hinweg erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!