Wie kann ich den Raum mit Flexbox vertikal verteilen?

Vertikale Flexbox-Platzverteilung

Beim Arbeiten mit Flexbox-Layouts in Reihen ist es einfach, den verfügbaren Platz zu füllen. Sie können flex: 1 für ein Element verwenden, um anzugeben, dass es den verbleibenden Speicherplatz beanspruchen soll. Allerdings kann es etwas schwieriger sein, dies vertikal zu erreichen.

Vertikale Flexbox

Um eine vertikale Raumverteilung zu erreichen, beachten Sie die folgenden Schritte:

1. Stellen Sie die Flexbox des übergeordneten Containers ein. Richtung zur Spalte.
2. Damit ein Element den verbleibenden Platz ausfüllt, weisen Sie ihm Flex zu: 1.

Beispiel

Hier ist eine Codedemonstration:

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 Beispiel gibt die Flex-Klasse im mittleren Element an, dass dies der Fall sein sollte Nehmen Sie den verbleibenden Platz in der vertikalen Spalte ein und schieben Sie die anderen Elemente nach oben und unten.

Das obige ist der detaillierte Inhalt vonWie kann ich den Raum mit Flexbox vertikal verteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!