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 in den verfügbaren Platz seines Flex-Containers zu passen.
Probieren Sie es aus
flex: 1;
flex: 2;
flex: 1 30px;
flex: 1 1 100px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Change me</div>
<div>flex: 1</div>
<div>flex: 1</div>
</section>
.default-example {
border: 1px solid #c5c5c5;
width: auto;
max-height: 300px;
display: flex;
}
.default-example > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#example-element {
background-color: rgba(255, 0, 200, 0.2);
border: 3px solid rebeccapurple;
}
Bestandteilseigenschaften
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>
: In allen Browsern wird die Kurzschreibweise zuflex: <flex-grow> 1 0%
erweitert. Die Spezifikation sagt jedoch, dass sie zuflex: <flex-grow> 1 0
erweitert werden sollte. - Ein gültiger Wert für
<flex-basis>
: Dann wird die Kurzschreibweise zuflex: 1 1 <flex-basis>
erweitert. - 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 wird die Kurzschreibweise zuflex: <flex-grow> <flex-shrink> 0%
erweitert. - Ein gültiger Wert für
flex-basis
: Dann wird die Kurzschreibweise zuflex: <flex-grow> 1 <flex-basis>
erweitert.
- Ein gültiger Wert für
-
-
Drei-Wert-Syntax: Die Werte müssen in der folgenden Reihenfolge sein:
- 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 werden als ungültig angesehen. Standardmäßig1
, wenn weggelassen. (initial ist0
) <'flex-shrink'>
-
Definiert das
flex-shrink
des Flex-Elements. Negative Werte werden als ungültig angesehen. Standardmäßig1
, wenn weggelassen. (initial ist1
) <'flex-basis'>
-
Definiert das
flex-basis
des Flex-Elements. Standardmäßig0%
, wenn weggelassen. Der Anfangswert istauto
. none
-
Das Element wird nach seinen
width
- undheight
-Eigenschaften dimensioniert. Es ist vollständig unflexibel: Es schrumpft oder wächst nicht in Bezug zum Flex-Container. Dies ist gleichbedeutend mit der Einstellungflex: 0 0 auto
.
Häufig 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 Platz verfügbar ist, schrumpft das Element auf seine Mindestgröße, um in den Container zu passen, wächst aber nicht, um positiven verfügbaren Platz im Flex-Container aufzunehmen. -
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 aufzunehmen, oder schrumpft auf seine Mindestgröße, um in den Container zu passen, falls negativer Platz 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 setzt dasflex-basis
auf null und macht das Flex-Element flexibel. Das Element wird mindestens so breit oder hoch wie seine Mindestgröße sein, wobei der positive verfügbare Platz des Containers proportional nach den Wachstumsfaktoren dieses Elements und seiner gleichgesinnten Flex-Elemente verteilt wird. Wenn alle Flex-Elemente dieses Muster verwenden, werden alle proportional zu ihren numerischen Werten dimensioniert.Warnung: Die Browser verwenden den
flex-basis
-Wert0%
, wenn derflex-basis
nicht in einemflex
-Wert angegeben ist. Dies ist nicht dasselbe wie derflex-basis
-Wert0
, den die Spezifikation vorgibt. Dies kann das Flex-Layout in einigen Fällen 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 den Effekt dieser Werte zu sehen, versuchen Sie, die Flex-Container unten 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
des Elements.
Formale Definition
Anfangswert | 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
Einstellen von flex: auto
Dieses Beispiel zeigt, wie ein Flex-Element mit flex: auto
wächst, um freien Platz im Container aufzunehmen.
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 festgelegt und ist daher standardmäßig aufinitial
gesetzt. 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 aber 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
, wodurch es aus dem Layout entfernt wird. Das #flex-auto
-Element dehnt sich dann aus, um den gesamten verfügbaren Raum im Container einzunehmen. Wenn Sie erneut auf das #flex-auto
-Element klicken, wird das #default
-Element wieder dem Container hinzugefügt.
Spezifikationen
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |