Wie kann ich Flexbox-Elemente in zwei bestimmte Zeilen zwingen?

Flexbox: Elemente in zwei Reihen anzeigen

In Flexbox können Sie Elemente einfach über mehrere Zeilen verteilen, indem Sie „flex-wrap: wrap“ für den Container festlegen. Um jedoch Elemente in bestimmte Zeilen zu zwingen, müssen Sie die Größe und den Abstand der Elemente steuern.

Das Problem der dynamischen Größenänderung von Elementen

Im bereitgestellten Code haben Sie acht Elemente mit Flex -grow: 1, was bedeutet, dass jedes Element versucht, so viel verfügbaren Platz wie möglich einzunehmen. Dies kann das gewünschte zweireihige Layout behindern.

Lösung: Elementbreite steuern

Um zwei Reihen mit jeweils vier Elementen zu erstellen, müssen Sie eine feste Breite für die untergeordneten Elemente definieren. Ändern Sie die untergeordneten Stile wie folgt:

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1: Setzt den Flex-Grow auf 1 und lässt Elemente zu wachsen
  • 0: Setzt den Flex-Shrink auf 0 und verhindert so, dass die Elemente über 21 % hinaus schrumpfen Breite
  • 21 %: Gibt die anfängliche Breite für jeden Artikel an (möglicherweise müssen Sie diesen Wert leicht anpassen)

Sowohl bei Flex-Wrap- als auch bei Artikelbreiten definiert, werden Ihre Artikel nun ordentlich in zwei Viererreihen ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie kann ich Flexbox-Elemente in zwei bestimmte Zeilen zwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!