Warum werden meine Flexbox-Artikel nicht richtig verpackt?

Fehlerbehebung beim Flex-Elementumbruch

Beim Erstellen mehrerer Reihen gleichhoher Elemente mit Flexbox kommt es häufig zu Problemen mit Elementen, die nicht richtig verpackt werden . Dies liegt daran, dass das Standardverhalten von Flex-Containern darin besteht, das Umwickeln zu verhindern (Flex-Wrap: Nowrap).

Um das Umwickeln zu aktivieren, stellen Sie Flex-Wrap auf Wrap ein:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

Flex-Container-Eigenschaften verstehen:

• Anzeige: flex: Initialisiert ein Element als Flex-Container und richtet Elemente in einer einzelnen Zeile oder Spalte aus.
• flex-wrap: wrap: Ermöglicht das Umschließen von Elementen innerhalb des Containers.
• flex-wrap: nowrap: Verhindert das Einwickeln von Elementen und beschränkt sie auf ein einziges Linie.

Beispiel:

Betrachten Sie das folgende Beispiel, um drei Reihen mit drei Quadraten gleicher Höhe zu erstellen:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

Das obige ist der detaillierte Inhalt vonWarum werden meine Flexbox-Artikel nicht richtig verpackt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!