Wie kann ich nach dem Verpacken einheitliche Artikelbreiten in der Flexbox sicherstellen?

Konsistenz der Elementbreite nach dem Flexbox-Umbruch

Einführung:
In CSS bietet das Flexbox-Layout Flexibilität beim Anordnen von Elementen, indem es ihnen eine dynamische Größe verleiht und Verpackungsmöglichkeiten. Ein häufiges Problem besteht jedoch darin, nach dem Verpacken gleiche Artikelbreiten sicherzustellen.

Das Problem:
Bei Verwendung von Flexbox ist es möglich, ein Layout zu erstellen, bei dem Artikel eine Mindestbreite haben und können wachsen, um den verfügbaren Platz zu füllen. Wenn die Elemente jedoch in mehrere Zeilen umgebrochen werden, können die Elemente in der letzten Zeile ungleichmäßige Breiten aufweisen, was zu einem unerwünschten Erscheinungsbild führt.

Nur ​​CSS-Lösung:
Leider ist dies bei reinem CSS nicht der Fall bieten derzeit eine saubere Lösung für die Ausrichtung flexibler Artikel in der letzten Reihe. Dies geht über den Rahmen der Flexbox-Spezifikation hinaus.

Alternativer Ansatz: CSS-Rasterlayout
Rasterlayout, eine weitere CSS3-Technologie, bietet eine Lösung für dieses Problem. Raster ermöglichen eine genauere Steuerung der Artikelplatzierung und können gleiche Artikelbreiten in der letzten Zeile sicherstellen:

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:

• display: Grid legt fest, dass das Containerelement ein Raster verwendet Layout.
• grid-template-columns definiert die Spalten im Raster, wobei die automatische Anpassung so viele Spalten wie nötig erstellt und minmax() die minimale und maximale Breite für jede Spalte festlegt.
• Grid-Auto-Rows gibt die Höhe der Zeilen an, in diesem Fall 20 Pixel.
• Grid-Gap fügt etwas Abstand zwischen dem Raster hinzu Artikel.

Das obige ist der detaillierte Inhalt vonWie kann ich nach dem Verpacken einheitliche Artikelbreiten in der Flexbox sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!