flex

Die Eigenschaft flex ist eine Untereigenschaft des Flexible Box Layout-Moduls.

Dies ist die Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Die zweite und dritte Parameter (flex-shrink und flex-basis) sind optional.

Syntax

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

.flex-item {

  /* this */
  flex: 1 100px;

  /* is the same as */
  flex-grow: 1;
  flex-basis: 100px;

  /* and it leaves the flex-shrink property alone, which would be */
  flex-shrink: inherit; /* defaults to 1 */

}

Hier ist die Aufschlüsselung, wie sich die Werte je nach Anzahl der angegebenen Werte zuordnen lassen

flex: none /* value 'none' case */
flex: <'flex-grow'> /* One value syntax, variation 1 */
flex: <'flex-basis'> /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'> /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'> /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> /* Three values syntax */
flex: inherit

Gängige Werte für flex

flex: 0 auto;

Dies ist dasselbe wie flex: initial; und die Kurzschreibweise für den Standardwert: flex: 0 1 auto. Es passt die Größe des Elements basierend auf seinen width/height Eigenschaften an (oder seinen Inhalt, falls nicht gesetzt).

Es macht das Flex-Element unflexibel, wenn noch freier Speicherplatz vorhanden ist, erlaubt ihm aber, auf die Mindestgröße zu schrumpfen, wenn nicht genügend Platz vorhanden ist. Die Ausrichtungsfähigkeiten oder auto-Ränder können verwendet werden, um Flex-Elemente entlang der Hauptachse auszurichten.

flex: auto;

Dies ist äquivalent zu flex: 1 1 auto. Vorsicht, dies ist nicht der Standardwert. Es passt die Größe des Elements basierend auf seinen width/height Eigenschaften an, macht es aber voll flexibel, sodass es jeglichen zusätzlichen Platz entlang der Hauptachse aufnimmt.

Wenn alle Elemente entweder flex: auto, flex: initial oder flex: none sind, wird der verbleibende Platz nach der Größenanpassung der Elemente gleichmäßig auf die Elemente mit flex: auto verteilt.

flex: none;

Dies ist äquivalent zu flex: 0 0 auto. Es passt die Größe des Elements gemäß seinen width/height Eigenschaften an, macht es aber vollkommen unflexibel.

Dies ähnelt flex: initial, mit der Ausnahme, dass es nicht schrumpfen darf, selbst in einer Überlaufsituation.

flex: <positive-number>

Äquivalent zu flex: 1 0px. Es macht das Flex-Element flexibel und setzt die Flex-Basis auf Null, was zu einem Element führt, das den angegebenen Anteil des verbleibenden Platzes erhält.

Wenn alle Elemente im Flex-Container dieses Muster verwenden, sind ihre Größen proportional zum angegebenen Flex-Faktor.

Demo

Das folgende Demo zeigt ein sehr einfaches Layout mit Flexbox dank der flex-Eigenschaft

Hier ist der relevante Code-Ausschnitt

.header,
.footer  { flex: 1 100%; }
.sidebar { flex: 1; }
.main    { flex: 2; }

Zuerst haben wir Flex-Elementen erlaubt, auf mehreren Zeilen angezeigt zu werden mit flex-flow: row wrap.

Dann weisen wir sowohl dem Header als auch dem Footer an, 100% der aktuellen Viewport-Breite einzunehmen, egal was passiert.

Und der Hauptinhalt sowie beide Seitenleisten teilen sich dieselbe Zeile und teilen den verbleibenden Platz wie folgt auf: 66% (2/(1+2)) für den Hauptinhalt, 33% (1/(1+2)) für die Seitenleiste.

Verwandte Eigenschaften

• flex-grow
• flex-shrink
• flex-basis
• align-self
• order

Weitere Ressourcen

• flex in der Spezifikation
• flex bei MDN
• Erweitertes Browser-übergreifendes Flexbox
• Ein Leitfaden zu Flexbox
• Verwendung von Flexbox
• Altes Flexbox und neues Flexbox

Browser-Unterstützung

• (modern) bedeutet die aktuelle Syntax aus der Spezifikation (z.B. display: flex;)
• (hybrid) bedeutet eine seltsame inoffizielle Syntax von 2011 (z.B. display: flexbox;)
• (alt) bedeutet die alte Syntax von 2009 (z.B. display: box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20- (alt)	3.1+ (alt)	2-21 (alt) 22+ (neu)	12.1+ (modern)	10+ (hybrid)	2.1+ (alt)	3.2+ (alt)

Blackberry Browser 10+ unterstützt die neue Syntax.

Weitere Informationen darüber, wie man Syntaxen mischt, um die beste Browserunterstützung zu erzielen, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).