Wie füllt eine Flexbox-Zeile den verbleibenden vertikalen Raum aus?

100 % vertikale Raumausnutzung in einem Flexbox-Layout erreichen

Flexbox ist ein leistungsstarkes Layoutsystem, mit dem Entwickler reaktionsfähige und dynamische Layouts erstellen können. Ein häufiges Szenario besteht darin, eine Flexbox-Layoutzeile zu haben, die automatisch den verbleibenden vertikalen Platz innerhalb eines Browserfensters einnimmt. In diesem Artikel wird erläutert, wie Sie dies mithilfe von Flexbox-Eigenschaften erreichen können.

Die Herausforderung:

Stellen Sie sich ein dreireihiges Flexbox-Layout vor, wobei die ersten beiden Reihen feste Höhen haben. Die Herausforderung besteht darin, die dritte Zeile vertikal wachsen zu lassen, um den verbleibenden Platz des Browserfensters auszufüllen, sodass sich der Inhalt entsprechend vergrößern kann.

Die Lösung:

Der Schlüssel Um dieses Verhalten zu erreichen, muss die Eigenschaft „flex“ der dritten Zeile auf einen Wert größer als 1 festgelegt werden. Dadurch wird die Flexbox angewiesen, die Zeile über ihre eigentliche Größe hinaus zu vergrößern und den verbleibenden Platz auf ihre untergeordneten Elemente zu verteilen. Das Festlegen eines Höhenattributs auf 100 % funktioniert jedoch nicht, da der Inhalt innerhalb der Zeile das Browserfenster nicht auf natürliche Weise ausfüllt.

Implementierung der Lösung:

Um dieses Layout ordnungsgemäß zu implementieren, stellen Sie sicher, dass die folgenden Prinzipien angewendet werden:

• Legen Sie die Höhe des HTML-Codes, des Hauptteils und des übergeordneten Div fest (Hülle) auf 100 %. Durch diese Vererbung kann die dritte Zeile die volle Höhe des Browserfensters erben.
• Setzen Sie die Flex-Eigenschaft der dritten Zeile auf einen Wert größer als 1 (z. B. Flex: 2). Dadurch wird die Zeile gezwungen, vertikal zu wachsen und den verbleibenden Platz zu nutzen.
• Erwägen Sie, den Spalten in der dritten Zeile eine Mindesthöhe von 100 % hinzuzufügen. Obwohl es in den meisten modernen Browsern nicht notwendig ist, kann es eine browserübergreifende Kompatibilität bieten.

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%;
}

Fazit:

Indem Sie diese Richtlinien befolgen, können Sie ganz einfach ein Flexbox-Layout erstellen, das automatisch den verbleibenden vertikalen Platz in einem Browserfenster einnimmt. Diese Technik ist besonders nützlich für responsive Designs, bei denen die Höhe des Inhalts erheblich variieren kann.

Das obige ist der detaillierte Inhalt vonWie füllt eine Flexbox-Zeile den verbleibenden vertikalen Raum aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!