Wie kann ich dafür sorgen, dass ein Flexbox-Element den verfügbaren vertikalen Raum ausfüllt?

Flexbox: Verfügbaren vertikalen Raum füllen

In einer horizontalen Flexbox-Zeile ermöglicht die Verwendung der Eigenschaft „flex“ für ein Element, dass es wächst und Füllen Sie den verfügbaren horizontalen Raum aus. Was ist, wenn Sie vertikal einen ähnlichen Effekt erzielen möchten?

Die Herausforderung besteht darin, sicherzustellen, dass sich ein vertikales Element ausdehnt, um den verbleibenden Raum auszufüllen, sodass andere Elemente vertikal gestapelt werden können. Um dies zu beheben, können Sie die folgenden Flexbox-Eigenschaften verwenden:

• Flex-Direction: Column im Flex-Container richtet Elemente vertikal statt horizontal aus.
• Flex: 1 auf das Element, das den verbleibenden Raum ausfüllen soll, lässt es wachsen und den verbleibenden Raum einnehmen Höhe.

Betrachten Sie das folgende Beispiel:

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

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

In diesem Setup hat der .row-Container eine feste Höhe des Browser-Ansichtsfensters unter Verwendung von height: 100vh. Das .flex-Element hat den Wert flex: 1, wodurch es sich ausdehnt und den verbleibenden vertikalen Raum ausfüllt. Dadurch werden die beiden anderen Elemente vertikal im .row-Container gestapelt.

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