Wie kann ich mit Flexbox eine flexible Mittelsäule mit Seitensäulen fester Breite erstellen?

Erzielen von Spalten mit fester Breite und flexibler Mittelspalte in einem Flexbox-Layout

In einem Flexbox-Layout kann die Verwaltung von Spaltenbreiten und Flexibilität eine Herausforderung darstellen. Dieser Artikel befasst sich mit dem häufigen Problem, linke und rechte Säulen mit fester Breite beizubehalten und gleichzeitig zu ermöglichen, dass sich die mittlere Säule biegt und den verfügbaren Raum ausfüllt.

Flexbox mit fester Breite Co

Um Spalten mit fester Breite zu erstellen, vermeiden Sie die Verwendung der Eigenschaft „Breite“, da dies zu einer unerwünschten Verkleinerung führen kann. Verwenden Sie stattdessen die Kurzschriftsyntax „flex“ mit spezifischen Werten für „flex-grow“, „flex-shrink“ und „flex-basis“. Zum Beispiel:

.fixed-column {
  flex: 0 0 230px; /* Don't grow, don't shrink, start at 230px */
}

Flexieren der Mittelsäule

Die Flexibilität der Mittelsäule ermöglicht es, sie je nach Fenstergröße zu erweitern oder zu verkleinern. Indem Sie die Flex-Eigenschaft auf 1 (oder einen beliebigen Wert ungleich Null) setzen, nimmt sie den verbleibenden Platz nach den Spalten mit fester Breite ein.

.flex-column {
  flex: 1 1 0; /* Grow, don't shrink, start at 0px */
}

Responsive Hide/Show

Um die rechte Spalte auszublenden, ohne die Breite der linken Spalte oder die Flexibilität der mittleren Spalte zu beeinträchtigen, verwenden Sie CSS-Medienabfragen oder JavaScript, um ihre Sichtbarkeit umzuschalten. Zum Beispiel:

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Vollständiges Codebeispiel

In Kombination der oben genannten Anpassungen könnte ein vollständiger Codeausschnitt so aussehen:

.fixed-column {
  flex: 0 0 230px;
}

.flex-column {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

Von Wenn Sie diese Techniken anwenden, können Sie effektiv ein flexibles Flexbox-Layout mit Spalten fester Breite und einer dynamischen Mittelspalte erreichen, die sich an die Fenstergröße und den Benutzer anpasst Interaktion.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox eine flexible Mittelsäule mit Seitensäulen fester Breite erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!