Flexbox – Verwirrendes bei der flex-Kurzschreibweise
Geschrieben am:
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 Werteauto
undcontent
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;
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.