Wie kann ich Seitensäulen mit fester Breite beibehalten und gleichzeitig die Flexibilität einer Mittelsäule zulassen?

Sicherstellen von Spalten mit fester Breite und einer flexiblen Mittelspalte

Im Streben nach einem flexiblen Weblayout ist es oft wünschenswert, zwei feste Spalten zu haben. Breitenspalten mit einer Mittelspalte, deren Breite sich dynamisch anpasst. Benutzer stoßen jedoch häufig auf Probleme mit der Verkleinerung der festen Spalten, wenn das Browserfenster kleiner wird.

Um dieses Problem zu beheben, ist es wichtig, die Angabe der Breiteneigenschaft für die festen Spalten zu vermeiden. Verwenden Sie stattdessen die speziellen Eigenschaften von Flexbox, um das Verhalten der Spalte zu steuern.

Der bevorzugte Ansatz ist die Verwendung von Flex: 0 0 230px; für die linke und rechte Spalte. Dadurch wird der Browser angewiesen, eine feste Breite von 230 Pixel für diese Spalten beizubehalten, um sicherzustellen, dass sie unabhängig von der Fenstergröße konstant bleiben.

flex: 0 0 230px; zerlegt sich in drei Teile:

• 0 bedeutet kein Wachstum (Flex-Grow)
• 0 bedeutet kein Schrumpfen (Flex-Shrink)
• 230px gibt den Anfangs- und Fixpunkt an Breite (Flex-Basis)

Zusätzlich ist es möglich, die rechte Spalte auszublenden reaktionsschnell mithilfe der CSS-Order-Eigenschaft von Flexbox. Dadurch kann die mittlere Spalte den freien Raum füllen, der durch die verborgene rechte Spalte entsteht, wodurch ein flexibles Verhalten erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Seitensäulen mit fester Breite beibehalten und gleichzeitig die Flexibilität einer Mittelsäule zulassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!