Wie erzwinge ich mit Flexbox zwei Reihen mit jeweils vier Elementen, wenn ich die Größe von acht Elementen dynamisch ändere?

Flexbox-Layout: 4 Elemente pro Zeile

Wenn Sie Flexbox verwenden, um die Größe von 8 Elementen auf der Seite dynamisch zu ändern, wie erzwingen Sie deren Teilung? in zwei Reihen (4 pro Reihe)?

Angesichts des folgenden Codeausschnitts:

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

Lösung:

Das Problem liegt bei Flex-Wrap: Wickeln Sie den Flex ein Container , der das Umschließen von Elementen ermöglicht. Flex-grow: 1 ermöglicht jedoch unbegrenztes Wachstum von Elementen, was dazu führt, dass diese nicht umgebrochen werden, wenn ihnen der Platz ausgeht.

Die Lösung besteht darin, eine Breite für das Element zu definieren und es zum Umbrechen zu zwingen:

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

.child {
  flex: 1 0 21%; /* 展开说明如下 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

Der erste Wert der Flex-Eigenschaft (1 in unserem Beispiel) verteilt den Platz gleichmäßig auf alle Element, der zweite Wert (0) legt die minimale Breite auf 0 fest und der dritte Wert (21 %) definiert die maximale Breite des Elements auf 21 % der verfügbaren Breite. Wenn Sie es so einrichten, werden die Elemente umbrochen, bevor sie die maximale Breite erreichen, sodass ein Layout mit 4 Elementen pro Zeile entsteht.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich mit Flexbox zwei Reihen mit jeweils vier Elementen, wenn ich die Größe von acht Elementen dynamisch ändere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!