Wie kann ich flexible Artikel in allen Zeilen mit gleicher Breite erreichen, auch beim Umwickeln?

Flexible Elemente gleicher Breite in Containern variabler Größe

Flexbox ermöglicht flexible und reaktionsfähige Layouts, kann jedoch bei der Wartung auf Herausforderungen stoßen Gleiche Breite zwischen Flex-Elementen nach dem Listenumbruch.

Aktuelle Flexbox Einschränkungen

In der aktuellen Spezifikation fehlt Flexbox eine native Lösung für die Ausrichtung gleicher Breite in der letzten Zeile. Dies liegt daran, dass die Größe flexibler Elemente auf dem verfügbaren Platz basiert und in der letzten Reihe möglicherweise weniger Platz übrig bleibt.

Alternative Lösung: Rasterlayout

Raster Layout, eine weitere CSS-Layouttechnik, bietet eine robustere Lösung für dieses Ausrichtungsproblem. Raster ermöglichen eine explizite Größenanpassung und Positionierung von Elementen innerhalb eines Containers:

CSS-Code

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

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

Erklärung

• Die Eigenschaft „grid-template-columns“ definiert die Größe und Anzahl der Spalten im Raster (so viele, wie in den Container passen, jede mit eine Mindestbreite von 100 Pixel und eine flexible 1fr-Einheit).
• Die Eigenschaft „grid-auto-rows“ legt die Höhe der Zeilen fest (in diesem Fall 20 Pixel).
• grid-gap gibt den Abstand an zwischen den Artikeln.

Diese Konfiguration verteilt die verfügbare Breite effektiv gleichmäßig auf die flexiblen Artikel, sodass diese sich auch am Leisten umwickeln und ihre gleiche Größe beibehalten können Zeile.

Das obige ist der detaillierte Inhalt vonWie kann ich flexible Artikel in allen Zeilen mit gleicher Breite erreichen, auch beim Umwickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!