Wie kann ich mit Flexbox Spalten mit fester Breite und flexibler Mitte erstellen?

Mit Flexbox Spalten mit fester Breite und flexibler Mitte erreichen

Bei der Webentwicklung ist es häufig erforderlich, Layouts mit einer Kombination aus Spalten mit fester Breite und flexibler Mitte zu erstellen. Breite Spalten. Flexbox bietet eine praktische Lösung, um diese Anordnung zu erreichen.

Wenn Sie Spalten mit fester Breite und flexibler Mitte anstreben, besteht die Herausforderung darin, zu verhindern, dass die Spalten mit fester Breite schrumpfen, wenn sich die Fenstergröße ändert. Anstatt sich auf die Breiteneigenschaft zu verlassen, die in Flexbox der Skalierung unterliegt, besteht der bevorzugte Ansatz darin, eine Kombination aus Flex-Grow, Flex-Shrink und Flex-Basis zu verwenden.

Bedenken Sie beispielsweise Folgendes Code:

.column.left {
    flex: 0 0 230px;
}

.column.right {
    flex: 0 0 230px;
}

In diesem Code besteht die Flex-Eigenschaft aus drei Werten:

• flex-grow: 0 (d. h. nicht wachsen)
• flex-shrink: 0 (d. h. nicht schrumpfen)
• flex-basis: 230px (d. h. bei 230px beginnen)

Dadurch wird effektiv sichergestellt, dass sowohl die linke als auch die rechte Spalte immer eine feste Breite von beibehalten 230px.

Darüber hinaus ist zu beachten, dass die Eigenschaften „justify-content“ und „align-items“ in diesem Szenario weggelassen werden können, da ihre Standardwerte mit dem gewünschten Verhalten übereinstimmen.

Zur Handhabung des Szenarios Wo die rechte Spalte ausgeblendet werden muss, bleibt die Flex-Eigenschaft dieselbe, da sie die Sichtbarkeit nicht beeinträchtigt. Stattdessen kann die Sichtbarkeit mithilfe von JavaScript- oder CSS-Techniken umgeschaltet werden, z. Breite Spalten unter Beibehaltung einer flexiblen Mitte, die sich an den verfügbaren Platz anpasst.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox Spalten mit fester Breite und flexibler Mitte erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!