`flex` CSS-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Die flex CSS Shorthand-Eigenschaft legt fest, wie sich ein Flex-Item vergrößern oder verkleinern wird, um den verfügbaren Platz im Flex-Container auszufüllen.

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Bestandteileigenschaften

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

Syntax

css

/* 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 die Shorthand in allen Browsern zu flex: <flex-grow> 1 0% erweitert. Die Spezifikation besagt jedoch, dass sie zu flex: <flex-grow> 1 0 erweitert werden sollte.
- ein gültiger Wert für flex-basis: dann wird die Shorthand zu flex: 1 1 <flex-basis> erweitert.
- 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 Shorthand in allen Browsern zu flex: <flex-grow> <flex-shrink> 0% erweitert.
  - ein gültiger Wert für flex-basis: dann wird die Shorthand zu flex: <flex-grow> 1 <flex-basis> erweitert.
Drei-Wert-Syntax: die Werte müssen in der folgenden 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.

Werte

<'flex-grow'>: Definiert das flex-grow des Flex-Items. Negative Werte gelten als ungültig. Standardwert ist 1, falls weggelassen. (Initialwert ist 0)
<'flex-shrink'>: Definiert das flex-shrink des Flex-Items. Negative Werte gelten als ungültig. Standardwert ist 1, falls weggelassen. (Initialwert ist 1)
<'flex-basis'>: Definiert das flex-basis des Flex-Items. Standardwert ist 0%, falls weggelassen. Der Initialwert ist auto.
none: Das Element wird entsprechend seiner width- und height-Eigenschaften dimensioniert. Es ist vollständig unflexibel: es wächst oder schrumpft nicht im Verhältnis zum Flex-Container. Dies entspricht dem Setzen von flex: 0 0 auto.

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

initial: Flex-Element wächst nicht, kann aber schrumpfen. Dieser Standardwert wird zu flex: 0 1 auto erweitert. Das Element wird in der Größe entsprechend seinen width- oder height-Eigenschaften festgelegt, je nach flex-direction. Wenn negativer verfügbarer Platz vorhanden ist, wird das Element auf seine Mindestgröße schrumpfen, um innerhalb des Containers zu passen, wird aber nicht wachsen, um positiven Platz im Flex-Container aufzunehmen.
auto: Flex-Element kann wachsen und schrumpfen. Dieser Wert wird zu flex: 1 1 auto erweitert. Das Element wird in der Größe entsprechend seinen width- oder height-Eigenschaften festgelegt, 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 im Container im Falle von negativem Raum zu passen. Das Flex-Element ist vollständig flexibel.
none: Das Flex-Element wächst nicht und schrumpft nicht. Dieser Wert wird zu flex: 0 0 auto erweitert. Das Element wird entsprechend seinen width- oder height-Eigenschaften festgelegt, 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 wird zu flex: <number> 1 0 erweitert. Dies setzt das 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 auf der Grundlage der Wachstumsfaktoren dieses Elements und seiner benachbarten Flex-Elemente verteilt wird. Wenn alle Flex-Elemente dieses Muster verwenden, werden alle in einem Verhältnis 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 vorschreibt. Dies kann das Flex-Layout in einigen Fällen beeinflussen. Sehen Sie sich diesen Effekt 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, 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.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Anwendbar auf	flexible Elemente einschließlich In-Flow-Pseudo-Elemente
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `flex-grow`: wie angegeben `flex-shrink`: wie angegeben `flex-basis`: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	wie die jeweiligen Kurzschreibweisen: `flex-grow`: Nummer `flex-shrink`: Nummer `flex-basis`: Längenangabe, Prozentsatz oder `calc()`;

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()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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

Beispiele

Flex: auto einstellen

Dieses Beispiel zeigt, wie ein Flex-Element mit flex: auto wächst, um jeden verfügbaren Raum im Container aufzunehmen.

HTML

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;
}

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 einen flex-Wert von auto. Der auto-Wert wird zu 1 1 auto erweitert, d.h. das Element darf sich ausdehnen.
Das #default-Element hat keinen flex-Wert gesetzt, daher wird es auf den initial-Wert standardmäßig gesetzt. Der initial-Wert wird zu 0 1 auto erweitert, 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 einzunehmen. 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 einzunehmen. Wenn Sie erneut auf das #flex-auto-Element klicken, wird das #default-Element wieder in den Container eingefügt.

Spezifikationen

Spezifikation
CSS Flexible Box Layout Module Level 1 # flex-property

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

flex CSS-Eigenschaft

HTML

CSS

JavaScript

Ergebnis

Help improve MDN

`flex` CSS-Eigenschaft