flex

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• flex-grow
• flex-shrink
• flex-basis

/* 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 expandiert die Kurzform in allen Browsern zu flex: <flex-grow> 1 0%. Allerdings sagt die Spezifikation, dass sie zu flex: <flex-grow> 1 0 expandieren sollte.
  • Ein gültiger Wert für <flex-basis>: dann expandiert die Kurzform zu flex: 1 1 <flex-basis>.
  • Das Schlüsselwort none oder eines der globalen Schlüsselwörter.

• 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 expandiert die Kurzform in allen Browsern zu flex: <flex-grow> <flex-shrink> 0%.
    • Ein gültiger Wert für flex-basis: dann expandiert die Kurzform zu flex: <flex-grow> 1 <flex-basis>.

• Drei-Wert-Syntax: Die Werte müssen in folgender Reihenfolge sein:

  1. Ein gültiger Wert für flex-grow.
  2. Ein gültiger Wert für flex-shrink.
  3. Ein gültiger Wert für flex-basis.

<'flex-grow'>

Definiert die flex-grow des Flex-Elements. Negative Werte gelten als ungültig. Standardwert ist 1, wenn weggelassen. (Initialwert ist 0)

<'flex-shrink'>

Definiert die flex-shrink des Flex-Elements. Negative Werte gelten als ungültig. Standardwert ist 1, wenn weggelassen. (Initialwert ist 1)

<'flex-basis'>

Definiert die flex-basis des Flex-Elements. Standardwert ist 0%, wenn weggelassen. Der Initialwert ist auto.

none

Das Element wird gemäß seinen width- und height-Eigenschaften dimensioniert. Es ist vollständig unflexibel: Es schrumpft weder noch wächst es im Verhältnis zum Flex-Container. Dies entspricht der Einstellung flex: 0 0 auto.

Häufig gewünschte Flexbox-Effekte können mit den folgenden flex-Werten erreicht werden:

• initial: Flex-Element wächst nicht, kann aber schrumpfen. Dieser Standardwert expandiert zu flex: 0 1 auto. Das Element wird gemäß seinen width- oder height-Eigenschaften dimensioniert, abhängig von der flex-direction. Wenn negativer verfügbarer Raum vorhanden ist, schrumpft das Element auf seine Mindestgröße, um innerhalb des Containers zu passen, wächst jedoch nicht, um positiven verfügbaren Raum im Flex-Container aufzunehmen.

• auto: Flex-Element kann wachsen und schrumpfen. Dieser Wert expandiert zu flex: 1 1 auto. Das Element wird gemäß seinen width- oder height-Eigenschaften dimensioniert, abhängig von der flex-direction, wächst jedoch, um verfügbaren positiven Raum im Flex-Container aufzunehmen, oder schrumpft auf seine Mindestgröße, um in den Container zu passen, falls negativer Raum vorhanden ist. Das Flex-Element ist vollständig flexibel.

• none: Das Flex-Element wächst weder noch schrumpft es. Dieser Wert expandiert zu flex: 0 0 auto. Das Element wird gemäß seinen width- oder height-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 zur festgelegten Zahl sein. Dieser Wert expandiert zu flex: <number> 1 0. Dies setzt die flex-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 basierend auf den Wachstumsfaktoren dieses Elements und seiner flex-Geschwister verteilt wird. Wenn alle Flex-Elemente dieses Muster verwenden, werden alle proportional zu ihren numerischen Werten dimensioniert.

  Warnung: Die Browser verwenden den flex-basis-Wert 0%, wenn die flex-basis in einem flex-Wert nicht spezifiziert ist. Dies ist nicht dasselbe wie der flex-basis-Wert 0, was die Spezifikation besagt. Dies kann das Flex-Layout in einigen Fällen beeinflussen. Sehen Sie sich dieses Phänomen im Beispiel Flex-basis 0 versus 0% an.

Für die meisten Zwecke sollten Autoren flex auf einen der folgenden Werte setzen: auto, initial, none oder eine positive einheitslose Zahl. Um die Wirkung dieser Werte zu sehen, ziehen Sie die Flex-Container unten.

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>

* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}

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.

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> = 
  <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        

Dieses Beispiel zeigt, wie ein Flex-Element mit flex: auto wächst, um freien Raum 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

body * {
  padding: 1rem;
  user-select: none;
  box-sizing: border-box;
  font-family: Consolas, Arial, sans-serif;
}

#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 einen flex-Wert von auto. Der auto-Wert expandiert zu 1 1 auto, d.h. das Element darf sich ausdehnen.
• Das #default-Element hat keinen flex-Wert gesetzt, also verwendet es den Standardwert initial. Der Initialwert expandiert zu 0 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 zu beanspruchen. Der gesamte verbleibende Raum 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 auszufüllen. Wenn Sie erneut auf das #flex-auto-Element klicken, wird das #default-Element wieder in den Container eingefügt.

• Grundkonzepte des Flexbox
• Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
• CSS Flexible Box Layout Modul