Flexbox – Verwirrendes bei der flex-Kurzschreibweise

Geschrieben am: 11.11.2016

Die Kurzschreibweise flex bestimmt die flexiblen Ausmaße von Flexboxen und ist eine verkürzte Schreibweise für drei Angaben. Soweit so klar. Was aber weniger bekannt ist: Wenn man bei flex die Angabe für flew-grow oder flex-basis weglässt, werden andere Werte genommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich. Aber noch mal ganz von vorne.

flex ist eine verkürzte Schreibweise für die folgenden drei Angaben:

flex-shrink: der Schrumpffaktor, d.h. wie stark ein Element schrumpfen kann, wenn nicht genügend Platz zur Verfügung steht. Dies wird durch eine Zahl angegeben wie 1, 2 etc.
flex-grow: der Vergrößerungsfaktor, d.h. wie überschüssiger Platz verteilt werden soll. Auch das wird durch eine Zahl bestimmt.
flex-basis: die Basisgröße – neben gängigen Längenangaben wie Pixel, Prozent, em etc. sind auch die Werte auto und content möglich.

Eine typische Verwendung von flex sieht folgendermaßen aus:

flex: 0 0 33%;

Damit soll das Element weder schrumpfen, noch größer werden, sondern immer die angegebenen 33% Breite oder Höhe – je nach flex-direction – haben.

Das W3C empfiehlt prinzipiell die Verwendung der Kurzschreibweise flex, weil damit die Defaults vernünftig gesetzt werden.

Defaults bei flex

Was aber sind die Defaults bei flex? Zuerst einmal wähle ich:

flex: initial;

Dann zeigen die Entwicklertools, dass das aufgelöst wird zu

flex-basis: auto; 
flex-grow: 0; 
flex-shrink: 1;

flex-basis: auto - flex-grow:0 - flex-shrink: 1

Dasselbe Ergebnis erzielt man auch, wenn man die Angaben einzeln macht:

flex-basis: initial; 
flex-grow: initial; 
flex-shrink: initial;

Soweit nichts Ungewöhnliches.

flex nur mit flex-basis

Anders hingegen verhält es sich, wenn man bei flex nicht alle Angaben schreibt, sondern beispielsweise nur die flex-basis bestimmt:

flex: auto;

Jetzt verhalten sich die Elemente vollständig anders. Denn das wird aufgelöst zu:

flex-basis: auto; 
flex-grow: 1; /* flex-grow: initial würde hingegen flex-grow: 0 entsprechen */ 
flex-shrink: 1;

Also: Wenn wir bei flex keinen flex-grow-Faktor angeben, so wird dieser auf 1 gesetzt. Wenn wir hingegen flex-grow: initial schreiben, gilt flex-grow: 0.

flex nur mit flex-grow

Anderes Beispiel - dieses Mal geben wir nur einen flex-grow-Faktor an:

flex: 1;

Dies wird aufgelöst als

flex-basis: 0%; /*flex-basis: initial entspricht hingegen flex-basis: auto*/ flex-shrink: 1; 
flex-grow: 1;`

Das heißt, wenn man bei flex die Angabe flew-grow oder flex-basis weglässt, werden andere Werte angenommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich – und ich kenne es nicht von anderen Kurzschreibeigenschaften. Es ist aber kein Bug, sondern ein Feature.

Geplantes Verhalten

Beim W3C heißt es dazu:

"The initial value of flex-grow und flex-basis are different from their defaults when omitted in the flex-shorthand. This is so that the flex shorthand can better accommodate the most common cases." (https://www.w3.org/TR/css-flexbox-1/#propdef-flex)

Ich übersetze: Die initialen (ursprünglichen/anfänglichen) Werte von flex-grow und flex-basis sind nicht dieselben, die genommen werden, wenn man die Werte bei der Kurzschreibweise von flex weglässt. Der Grund für dieses Verhalten ist, dass damit die flex-Kurzschreibweise besser für die gängigsten Fälle gerüstet ist.

Fazit

Normalerweise erreicht man durch die Kurzschreibweise bei flex, wenn man nicht alle Wert angibt, ein vernünftiges Verhalten. Wer hingegen genauerer Kontrolle haben möchte, und diese ganze Geschichte etwas verwirrend findet, sollte am besten immer alle Angaben bei flex schreiben oder zumindest immer flex-grow und flex-basis bestimmen. Bei flex-shrink gibt es hingegen keine Abweichungen zwischen Weglassen und Defaultwert der Angabe.

Florence Maurice