flex
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die flex
-CSS Kurzschreibweise legt fest, wie ein Flex-Element wachsen oder schrumpfen soll, um den verfügbaren Platz in seinem Flex-Container zu nutzen.
Probieren Sie es aus
Bestimmende Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Keyword value */
flex: none; /* 0 0 auto */
/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */
/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px; /* 1 1 30px */
/* Two values: flex-grow | flex-shrink */
flex: 2 2; /* 2 2 0% */
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;
Die flex
-Eigenschaft kann mit einem, zwei oder drei Werten angegeben werden.
-
Ein-Wert-Syntax: der Wert muss einer der folgenden sein:
- ein gültiger Wert für
<flex-grow>
: dann erweitert sich die Kurzschreibweise in allen Browsern zuflex: <flex-grow> 1 0%
. In der Spezifikation wird jedoch angegeben, dass sie sich zuflex: <flex-grow> 1 0
erweitern sollte. - ein gültiger Wert für
<flex-basis>
: dann erweitert sich die Kurzschreibweise zuflex: 1 1 <flex-basis>
. - das Schlüsselwort
none
oder eines der globalen Schlüsselwörter.
- ein gültiger Wert für
-
Zwei-Wert-Syntax:
-
Der erste Wert muss ein gültiger Wert für
flex-grow
sein. -
Der zweite Wert muss einer der folgenden sein:
- ein gültiger Wert für
flex-shrink
: dann erweitert sich die Kurzschreibweise in allen Browsern zuflex: <flex-grow> <flex-shrink> 0%
. - ein gültiger Wert für
flex-basis
: dann erweitert sich die Kurzschreibweise zuflex: <flex-grow> 1 <flex-basis>
.
- ein gültiger Wert für
-
-
Drei-Wert-Syntax: die Werte müssen in der folgenden Reihenfolge angegeben werden:
- ein gültiger Wert für
flex-grow
. - ein gültiger Wert für
flex-shrink
. - ein gültiger Wert für
flex-basis
.
- ein gültiger Wert für
Werte
<'flex-grow'>
-
Definiert das
flex-grow
des Flex-Elements. Negative Werte sind ungültig. Standardwert ist1
, wenn weggelassen. (initial ist0
) <'flex-shrink'>
-
Definiert das
flex-shrink
des Flex-Elements. Negative Werte sind ungültig. Standardwert ist1
, wenn weggelassen. (initial ist1
) <'flex-basis'>
-
Definiert das
flex-basis
des Flex-Elements. Standardwert ist0%
, wenn weggelassen. Der Initialwert istauto
. none
-
Das Element wird entsprechend seinen
width
- undheight
-Eigenschaften dimensioniert. Es ist vollständig unflexibel: es schrumpft oder wächst nicht in Bezug auf den Flex-Container. Dies entspricht dem Setzen vonflex: 0 0 auto
.
Gewünschte Flexbox-Effekte können mit den folgenden flex
-Werten erreicht werden:
-
initial
: Das Flex-Element wächst nicht, kann aber schrumpfen. Dieser Standardwert erweitert sich zuflex: 0 1 auto
. Das Element wird gemäß seinenwidth
- oderheight
-Eigenschaften dimensioniert, abhängig von derflex-direction
. Wenn negativer freier Platz vorhanden ist, schrumpft das Element auf seine Mindestgröße, um innerhalb des Containers zu passen, wächst jedoch nicht, um positiven Platz im Flex-Container zu nutzen. -
auto
: Das Flex-Element kann wachsen und schrumpfen. Dieser Wert erweitert sich zuflex: 1 1 auto
. Das Element wird gemäß seinenwidth
- oderheight
-Eigenschaften dimensioniert, abhängig von derflex-direction
, wächst jedoch, um verfügbaren positiven Platz im Flex-Container zu nutzen oder schrumpft auf seine Mindestgröße, um in den Container zu passen, wenn negativer Raum vorhanden ist. Das Flex-Element ist vollständig flexibel. -
none
: Das Flex-Element wächst weder noch schrumpft es. Dieser Wert erweitert sich zuflex: 0 0 auto
. Das Element wird gemäß seinenwidth
- oderheight
-Eigenschaften dimensioniert, abhängig von der Richtung des Flex-Containers. Das Flex-Element ist vollständig unflexibel. -
flex: <number [1,∞]>
: Die Hauptgröße des Flex-Elements wird proportional zu der festgelegten Zahl sein. Dieser Wert erweitert sich zuflex: <number> 1 0
. Dies setztflex-basis
auf null und macht das Flex-Element flexibel. Das Element wird mindestens so breit oder hoch sein wie seine Mindestgröße, wobei der positive verfügbare Raum des Containers proportional auf der Grundlage der Wachstumsfaktoren dieses Elements und seiner Schwester-Flex-Elemente verteilt wird. Wenn alle Flex-Elemente dieses Muster verwenden, werden alle proportional zu ihren Zahlenwerten dimensioniert.Warnung: Die Browser verwenden den
flex-basis
-Wert0%
, wennflex-basis
nicht in einemflex
-Wert angegeben ist. Dies ist nicht dasselbe wie derflex-basis
-Wert0
, den die Spezifikation vorgibt. Dies kann in einigen Fällen das Flex-Layout beeinflussen. Sehen Sie sich dieses Phänomen im Beispiel Flex-basis0
versus0%
an.
Beschreibung
Für die meisten Zwecke sollten Autoren flex
auf einen der folgenden Werte setzen: auto
, initial
, none
oder eine positive einheitenlose Zahl. Um die Auswirkung dieser Werte zu sehen, versuchen Sie, die Flex-Container unten zu vergrößern oder zu verkleinern:
Standardmäßig schrumpfen Flex-Elemente nicht unter ihre min-content
-Größe. Um dies zu ändern, setzen Sie die min-width
- oder min-height
-Eigenschaft des Elements.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | flexible Elemente einschließlich In-Flow-Pseudo-Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
flex =
none |
[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<flex-grow> =
<number [0,∞]>
<flex-shrink> =
<number [0,∞]>
<flex-basis> =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Beispiele
Einstellung flex: auto
Dieses Beispiel zeigt, wie ein Flex-Element mit flex: auto
wächst, um freien Raum im Container zu absorbieren.
HTML
<div id="flex-container">
<div id="flex-auto">
flex: auto (click to remove/add the `flex: initial` box)
</div>
<div id="default">flex: initial</div>
</div>
CSS
#flex-container {
border: 2px dashed gray;
display: flex;
}
#flex-auto {
cursor: pointer;
background-color: wheat;
flex: auto;
}
#default {
background-color: lightblue;
}
JavaScript
const flexAutoItem = document.getElementById("flex-auto");
const defaultItem = document.getElementById("default");
flexAutoItem.addEventListener("click", () => {
defaultItem.style.display =
defaultItem.style.display === "none" ? "block" : "none";
});
Ergebnis
Der Flex-Container enthält zwei Flex-Elemente:
- Das
#flex-auto
-Element hat einenflex
-Wert vonauto
. Derauto
-Wert erweitert sich zu1 1 auto
, d.h. das Element darf sich ausdehnen. - Das
#default
-Element hat keinenflex
-Wert gesetzt, daher verwendet es den Standardwertinitial
. Derinitial
-Wert erweitert sich zu0 1 auto
, d.h. das Element darf sich nicht ausdehnen.
Das #default
-Element nimmt so viel Platz ein, wie seine Breite erfordert, dehnt sich jedoch nicht aus, um mehr Platz einzunehmen. Der gesamte verbleibende Platz wird vom #flex-auto
-Element eingenommen.
Wenn Sie auf das #flex-auto
-Element klicken, setzen wir die display
-Eigenschaft des #default
-Elements auf none
und entfernen es aus dem Layout. Das #flex-auto
-Element dehnt sich dann aus, um den gesamten verfügbaren Platz im Container einzunehmen. Wenn Sie erneut auf das #flex-auto
-Element klicken, wird das #default
-Element wieder in den Container eingefügt.
Spezifikationen
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |
Browser-Kompatibilität
BCD tables only load in the browser