Wie kann ich dafür sorgen, dass Flexbox-Kinder den verfügbaren Platz für unterschiedliche Höhen nutzen?

Sicherstellen, dass Flexbox-Kinder den verfügbaren Platz für unterschiedliche Höhen nutzen

Frage:

Wie geht das in einem Flexbox-Layout mit zwei Spalten? Können Elemente unterschiedlicher Größe so verteilt werden, dass sie den gesamten zugänglichen Bereich ausfüllen, anstatt die gleiche Höhe wie die höchsten zu haben Element?

Kontext:

Mit der Flex-Wrap-Eigenschaft von Flexbox können wir Elemente in mehrere Zeilen umbrechen. Standardmäßig haben jedoch alle Elemente innerhalb einer Zeile die gleiche Höhe wie das höchste Element in dieser Zeile. Dies kann unerwünscht sein, wenn wir möchten, dass Elemente ihre natürliche Höhe behalten.

Beispiel:

Beachten Sie den folgenden Code:

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}

Antwort:

Flexbox beinhaltet von Natur aus, dass sich Zeilen wie beschrieben verhalten über. Flexbox beabsichtigt nicht, Layouts im Mauerwerksstil nachzuahmen, bei denen sich Reihenelemente in den Raum benachbarter Reihen erstrecken können. Es gibt begrenzte Möglichkeiten zum Anpassen der Elementhöhe mithilfe von align-items:

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Erwägen Sie alternativ die Verwendung der Spaltenausrichtung oder erkunden Sie das Mehrspaltenmodul für weitere Anpassungsoptionen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Flexbox-Kinder den verfügbaren Platz für unterschiedliche Höhen nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!