Wie kann ich dafür sorgen, dass ein Element den verfügbaren Platz in einer Flexbox vertikal ausfüllt?

Flexbox: Verfügbaren Raum vertikal ausfüllen

In einer Flexbox-Reihe ermöglicht die Verwendung von Flex für ein Element, dass es wächst und den verbleibenden verfügbaren Raum füllt. Nun stellt sich die Frage: Können wir dieses Verhalten vertikal reproduzieren?

Im beschriebenen Szenario haben Sie eine Flexbox-Zeile, in der ein Element vertikal die Höhe des übergeordneten Containers überspannen soll, auch wenn der Container über eine verfügt feste Höhe. Beim Positionieren des Elements absolut mit unten: 0; Ist eine praktikable Lösung, wird das gewünschte Ergebnis mit Flexbox gesucht.

Um dies zu erreichen:

1. Flex-Direction:-Spalte für den Flex-Container festlegen.
2. Zuweisen flex: 1 zu dem Element, das den verbleibenden Platz belegen soll.

Hier ist ein Demo:

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

body { margin: 0 }
*, ::before, ::after { box-sizing: border-box; }
.row {
  display: flex;
  flex-direction: column;
  height: 100vh
}
.flex { flex: 1 }
.row, .row > * { border: 1px solid; }

In diesem Beispiel füllt das Flexbox-Element mit Flex: 1 den gesamten vertikalen Raum des übergeordneten Containers wie gewünscht aus.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Element den verfügbaren Platz in einer Flexbox vertikal ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!