Wie erstelle ich ein dreispaltiges Flexbox-Layout mit äußeren Spalten fester Breite?

Dreispaltiges Flexbox-Layout mit äußeren Spalten fester Breite

Sie versuchen, ein dreispaltiges Flexbox-Layout mit äußeren Spalten fester Breite und einer flexiblen Mitte zu erstellen Spalte. Trotz der Definition der Abmessungen für diese Spalten scheinen sie kleiner zu werden, wenn das Ansichtsfenster kleiner wird.

Lösung

Der Schlüssel zu diesem Layout ist die Verwendung von Flex statt Breite. Ersetzen Sie width durch die Flex-Eigenschaft in Ihrem CSS:

#container {
  display: flex;
}

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

Das bedeutet jeder Wert in der Flex-Eigenschaft:

• 0 für Flex-Grow: Dadurch wird verhindert, dass die Spalten wachsen über ihre ursprüngliche Breite hinaus.
• 0 für Flex-Shrink: Dies verhindert, dass die Spalten unter ihre ursprüngliche Breite schrumpfen Breite.
• 230px für Flex-Basis: Dies setzt die anfängliche Breite der Spalten auf 230px.

Durch das Festlegen dieser Eigenschaften definieren Sie feste Abmessungen für die verbleibenden äußeren Spalten bleibt auch dann konstant, wenn sich das Ansichtsfenster ändert.

Zusätzlicher Hinweis

Für die optionale Anforderung, die rechte Spalte auszublenden, legen Sie einfach die Anzeigeeigenschaft fest von .column.right zu none:

.column.right {
  display: none;
}

Dadurch wird die rechte Spalte ausgeblendet, während die feste Breite der linken Spalte und die flexible Breite der mittleren Spalte beibehalten werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein dreispaltiges Flexbox-Layout mit äußeren Spalten fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!