Wie kann ich eine bestimmte Flexbox-Zeile erweitern, um den verbleibenden vertikalen Raum auszufüllen?

Vertikalraum mit Flexbox ausgleichen

Flexbox bietet einen leistungsstarken Mechanismus zum Organisieren von Inhalten innerhalb eines Layouts. Allerdings kann es manchmal schwierig sein, den vertikalen Platzverbrauch einer bestimmten Reihe in einer mehrreihigen Flexbox zu kontrollieren.

Zum Beispiel, wenn Sie ein Szenario haben, in dem Sie möchten, dass die dritte Reihe erweitert wird, um die verbleibende zu belegen vertikalen Raum, so können Sie dies mit Flexbox erreichen:

Stellen Sie zunächst sicher, dass der äußere Container, normalerweise die Body- und HTML-Elemente, sowie der übergeordnete Flexbox-Container (Wrapper) ihre Höhen haben auf 100 % eingestellt, wodurch effektiv die volle Höhe des Browserfensters übernommen wird.

Konzentrieren Sie sich als Nächstes auf die dritte Zeile (#row3) in Ihrem Flexbox-Layout. Weisen Sie dieser Zeile einen Flex-Wert größer als 1 zu, während die anderen Zeilen einen Flex-Wert von 1 oder weniger haben. Dies signalisiert dem Browser, dass die dritte Zeile mehr Platz beanspruchen sollte als die anderen.

Um das Layout weiter zu verfeinern, können Sie die Min-Height-Eigenschaft der inneren Spalten (#col1, #col2 und) festlegen #col3) innerhalb der dritten Zeile auf 100 %. Dadurch wird sichergestellt, dass sie die volle Höhe ihres übergeordneten Containers (#row3) erben und ihre Höhe entsprechend anpassen.

Beispielcode:

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

#row1 {
    background-color: red;
}

#row2 {
    background-color: blue;
}

#row3 {
    background-color: green;
    flex: 2;
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

Durch Implementierung dieser Anpassungen ermöglichen Sie der dritten Zeile, ihre Höhe dynamisch anzupassen, wodurch der verbleibende vertikale Platz im Browserfenster verbraucht wird. Dies sorgt für das gewünschte Layout, bei dem sich die dritte Reihe erweitert, um den Hohlraum zu füllen und je nach Bedarf Elemente vertikal aufzunehmen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine bestimmte Flexbox-Zeile erweitern, um den verbleibenden vertikalen Raum auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!