Wie kann ich ein dreispaltiges Flexbox-Layout mit Seitenspalten fester Breite und einer flexiblen Mittelspalte erstellen?

Spalten mit fester Breite und flexibler Mitte beibehalten

Sie möchten ein Flexbox-Layout mit drei Spalten entwerfen, wobei die linke und rechte Spalte beibehalten werden eine feste Breite, während die mittlere Spalte erweitert wird, um den verbleibenden Platz einzunehmen. Obwohl die Abmessungen für die Spalten festgelegt werden, verkleinern sie sich unerwünschterweise, wenn sich die Fenstergröße anpasst.

Lösung

Um das gewünschte Layout zu erreichen, ersetzen Sie die Eigenschaft width durch die folgende Flex-Spezifikation für die Spalten mit fester Breite:

flex: 0 0 230px;

Diese Angabe bedeutet:

• 0 für Flex-Grow: Erweitern Sie die Spalte nicht.
• 0 für Flex-Shrink: Komprimieren Sie die Spalte nicht.
• 230 Pixel für Flex-Basis: Legen Sie die Anfangsbreite auf 230 Pixel fest.

Im Wesentlichen stellt diese Konfiguration sicher, dass die Spalten unabhängig vom Fenster bei 230 Pixel bleiben Größe.

Zusätzliche Funktion

Bezüglich Ihrer zusätzlichen Anforderung, die rechte Spalte basierend auf Benutzerinteraktion zu verbergen, während die feste Breite der linken Spalte beibehalten und die mittlere Spalte erweitert wird Dementsprechend können Sie Folgendes einbauen:

.column.center {
  flex: 1 0 calc(100% - 230px);
}

Diese Änderung stellt sicher, dass, wenn die rechte Spalte ausgeblendet ist, die mittlere Spalte den verbleibenden Platz ausfüllt, während die linke Spalte fixiert bleibt 230px.

Das obige ist der detaillierte Inhalt vonWie kann ich ein dreispaltiges Flexbox-Layout mit Seitenspalten fester Breite und einer flexiblen Mittelspalte erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!