Wie kann ich mit Flexbox sicherstellen, dass 4 Artikel pro Zeile vorhanden sind?

Flexbox: 4 Elemente pro Zeile erzwingen

Im Bereich des responsiven Designs bietet Flexbox ein leistungsstarkes Tool zum Anordnen von Elementen. Es ist jedoch nicht immer einfach, bestimmte Layouts zu erreichen, beispielsweise die Durchsetzung einer festen Anzahl von Elementen pro Zeile.

Verstehen des Problems

Wie in der ursprünglichen Abfrage beschrieben, besteht das Ziel darin, 8 anzuzeigen Artikel in einem Flexbox-Container unter Beibehaltung einer konsistenten Anordnung von 4 Artikeln pro Reihe. Standardmäßig verteilt Flexbox die Elemente gleichmäßig über den verfügbaren Platz, was häufig zu ungleichmäßigen Reihen führt, wenn die Anzahl der Elemente die gewünschte Breite überschreitet.

Lösung: Flex-Grow überschreiben

In diesem Szenario Das Problem liegt an der Flex-Grow-Eigenschaft, die auf die einzelnen Flex-Elemente angewendet wird. Flex-Grow weist die Elemente an, sich proportional auszudehnen, um den verfügbaren Platz einzunehmen. Da für die Elemente jedoch keine Breite definiert ist, schrumpfen sie kontinuierlich auf Null und werden nie umgebrochen.

Der Schlüssel zur Durchsetzung einer bestimmten Anzahl von Elementen pro Zeile besteht darin, eine Breite für die flexiblen Elemente zu definieren. Durch Festlegen einer festen Breite belegt jedes Element einen vorgegebenen Platz und zwingt es zum Umbruch, wenn der verfügbare Platz überschritten wird.

Implementierung

Der folgende CSS-Code zeigt, wie sichergestellt wird, dass 8 Elemente angezeigt werden in 2 Reihen zu je 4:

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

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Flex: 1 0 21 %; – Diese Flex-Kurzschrifteigenschaft:

  • 1: Weist Elemente an, proportional zu diesem Wert zu wachsen (sofern Platz verfügbar ist).
  • 0: Legt die Mindestbreite des Elements fest, um dies zu verhindern schrumpft.
  • 21: Definiert die Breite einzelner Elemente als 21 % der Breite des übergeordneten Containers. Basierend auf dem Flex-Wert stellt dies sicher, dass 4 Elemente in jede Zeile passen.
• Flex-wrap: wrap; – Ermöglicht das Umbrechen von Elementen in die nächste Zeile wenn die Behälterbreite nicht ausreicht.

Fazit

Durch die Festlegung einer festen Breite für flexible Artikel und die Aktivierung der flexiblen Verpackung, Es wird möglich, eine bestimmte Anzahl von Elementen pro Zeile in einem Flexbox-Layout zu erzwingen. Diese Technik bietet Designern eine bessere Kontrolle über die Reaktionsfähigkeit und das Layout ihrer Webelemente.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox sicherstellen, dass 4 Artikel pro Zeile vorhanden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!