flex

Diese Eigenschaft ist eine Kurzschreibweise 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 wird in allen Browsern die Kurzschreibweise zu flex: <flex-grow> 1 0% expandiert. Die Spezifikation sagt jedoch, dass es zu flex: <flex-grow> 1 0 expandiert werden 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-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 in allen Browsern zu flex: <flex-grow> <flex-shrink> 0% expandiert.
    • ein gültiger Wert für flex-basis: dann expandiert die Kurzschreibweise zu flex: <flex-grow> 1 <flex-basis>.

• Drei-Wert-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 das flex-grow des Flex-Elements. Negative Werte werden als ungültig betrachtet. Standardmäßig auf 1, wenn weggelassen. (Initialwert ist 0)

<'flex-shrink'>

Definiert das flex-shrink des Flex-Elements. Negative Werte werden als ungültig betrachtet. Standardmäßig auf 1, wenn weggelassen. (Initialwert ist 1)

<'flex-basis'>

Definiert das flex-basis des Flex-Elements. Standardmäßig auf 0%, wenn weggelassen. Der Anfangswert ist auto.

none

Das Element wird gemäß seiner width- und height-Eigenschaften bemessen. Es ist komplett unflexibel: Es schrumpft nicht und wächst nicht in Bezug auf den Flex-Container. Dies entspricht der Einstellung flex: 0 0 auto.

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 bemessen, abhängig von der flex-direction. Wenn negativer verfügbarer Platz vorhanden ist, schrumpft das Element auf seine Mindestgröße, um in den Container zu passen, wächst jedoch nicht, um positiven verfügbaren Platz im Flex-Container zu absorbieren.

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

• none: Das Flex-Element wächst nicht und schrumpft nicht. Dieser Wert expandiert zu flex: 0 0 auto. Das Element wird gemäß seinen width- oder height-Eigenschaften bemessen, 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 eingestellten Nummer sein. Dieser Wert expandiert zu flex: <number> 1 0. Dies stellt den flex-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 Raum des Containers proportional basierend auf den Wachstumsfaktoren dieses Elements und seiner geschwister Flex-Elemente verteilt wird. Wenn alle Flex-Elemente dieses Muster verwenden, werden alle proportional zu ihren numerischen Werten bemessen.

  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, was die Spezifikation besagt. Dies kann in einigen Fällen das Flex-Layout beeinflussen. Siehe dieses Effektbeispiel in dem Flex-basis 0 versus 0% Beispiel.

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

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 expandieren.
• Das #default-Element hat keinen flex-Wert gesetzt, sodass es auf den initial-Wert standardisiert. Der initial-Wert expandiert zu 0 1 auto, d.h. das Element darf nicht expandieren.

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 und entfernen es damit 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 zum Container hinzugefügt.

• Grundlegende Konzepte von Flexbox
• Steuerung von Verhältnissen von Flex-Elementen entlang der Hauptachse
• CSS-Flexible-Box-Layout Modul