Wie kann ich sicherstellen, dass Flexartikel auch nach dem Verpacken die gleiche Breite haben?

Flexible Artikel mit gleicher Breite, auch nach dem Verpacken

Flexbox bietet eine leistungsstarke Möglichkeit, flexible Layouts zu erstellen, aber es ist nicht immer einfach, bestimmte Ausrichtungsanforderungen zu erfüllen. Eine häufige Herausforderung besteht darin, für flexible Elemente die gleiche Breite sicherzustellen, auch nachdem sie in neue Zeilen umgebrochen werden.

Das Problem

Stellen Sie sich ein Szenario vor, in dem Sie eine Liste von Elementen mit unterschiedlichen Inhaltslängen haben. Sie möchten, dass sie sich gleichmäßig ausdehnen, um die Containerbreite auszufüllen, dabei aber eine Mindestbreite beizubehalten und bei Bedarf in neue Zeilen umzubrechen. Wenn Sie jedoch nur Flexbox verwenden, werden die Elemente in der letzten Zeile möglicherweise nicht gleichmäßig ausgerichtet.

Ursprünglicher Flexbox-Ansatz

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  min-width: 100px;
  flex-grow: 1;
}

Dieser Ansatz verteilt den verfügbaren Platz auf die Elemente, was jedoch nicht der Fall ist Stellen Sie sicher, dass die letzte Zeile gleich breit ist.

Rasterlayout-Lösung

Glücklicherweise bietet CSS Grid Layout eine Lösung für dieses Problem. Das Rasterlayout verwendet einen expliziteren Layoutmechanismus, wodurch es vorhersehbarer wird. Durch Anwenden des Rasterlayouts auf das obige Beispiel wird das Ausrichtungsproblem behoben.

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

Dieses aktualisierte Codefragment verwendet die Eigenschaft „grid-template-columns“, um die Spalten im Raster zu definieren. Die Wiederholungsfunktion (automatische Anpassung, ...) ordnet Spalten automatisch passend zum Inhalt zu und stellt so sicher, dass alle Elemente die gleiche Breite haben.

Fazit

Flexbox ist zwar ein vielseitiges Layout-Tool, aber das ist es auch Nicht ideal für Situationen, in denen Sie eine präzise Ausrichtung der Gegenstände benötigen. In Fällen, in denen flexible Elemente mit gleicher Breite gewünscht werden, bietet Grid Layout eine einfachere und vorhersehbarere Lösung.

Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass Flexartikel auch nach dem Verpacken die gleiche Breite haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!