flex

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

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

• Drei-Werte-Syntax: die Werte müssen in der folgenden Reihenfolge angegeben werden:

  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. (anfänglich ist 0)

<'flex-shrink'>

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

<'flex-basis'>

Definiert die flex-basis des Flex-Elements. Standardwert ist 0%, wenn weggelassen. Der anfängliche Wert ist auto.

none

Das Element wird entsprechend seinen width- und height-Eigenschaften dimensioniert. Es ist vollkommen unflexibel: es schrumpft oder wächst nicht in Bezug auf den Flex-Container. Dies entspricht der Einstellung flex: 0 0 auto.

Häufig gewünschte Flexbox-Effekte lassen sich mit den folgenden flex-Werten erzielen:

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

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

• none: Das Flex-Element wächst nicht und schrumpft nicht. Der Wert expandiert zu flex: 0 0 auto. Das Element wird entsprechend seiner width- oder height-Eigenschaften dimensioniert, abhängig von der Ausrichtung des Flex-Containers. Das Flex-Element ist vollständig unflexibel.

• flex: <number [1,∞]>: Die Hauptgröße des Flex-Elements ist proportional zu der festgelegten Zahl. Der Wert expandiert zu flex: <number> 1 0. Dies setzt den flex-basis auf null und macht das Flex-Element flexibel. Das Element ist mindestens so breit oder hoch wie seine Mindestgröße, wobei der positive verfügbare Raum des Containers proportional basierend auf den Wachstumsfaktoren dieses Elements und seiner Flex-Element-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 der flex-basis in einem flex-Wert nicht angegeben ist. Dies ist nicht dasselbe wie der flex-basis-Wert 0, den die Spezifikation vorgibt. Dies kann das Flex-Layout in einigen Fällen beeinflussen. Siehe diese Auswirkung im Beispiel Flex-basis 0 versus 0%.

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

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

Dieses Beispiel zeigt, wie ein Flex-Element mit flex: auto wächst, um jeden freien Raum im Container auszufüllen.

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;
  text-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 Element #flex-auto hat den flex-Wert auto. Der auto-Wert expandiert zu 1 1 auto, d.h. das Element darf sich ausdehnen.
• Das Element #default hat keinen flex-Wert gesetzt, daher entspricht es dem initial-Wert. Der initial-Wert 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, wächst jedoch nicht, um mehr Platz zu beanspruchen. 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 herausgenommen wird. Das #flex-auto-Element dehnt sich dann aus, um den gesamten verfügbaren Platz im Container auszufüllen. Wenn Sie erneut auf das #flex-auto-Element klicken, wird das #default-Element wieder in den Container eingefügt.

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