Wie funktioniert flex-grow?

Nachdem der Support für Flexbox mittlerweile schon mehr als brauchbar ist, habe ich vor einigen Wochen beschlossen, dass es endlich Zeit für mich ist, mich mit Flexbox zu beschäftigen und es in meinen Projekten zu verwenden.
Ich war sehr schnell sehr begeistert, weil Flexbox tatsächlich so abgefahren ist, wie alle sagen. Dementsprechend habe ich keine Gelegenheit ausgelassen und immer wieder von meinen neuesten Erkenntnissen erzählt. So war es auch wie ich meinem Kollegen Rob von der Eigenschaft flex-grow vorgeschwärmt habe. Ich habe ihm gezeigt wie sie funktioniert und auch eine einfache Demo erstellt.
Er war ähnlich begeistert und wollte flex-grow gleich auf einer Website testen, die er kürzlich gemacht hat. Also haben wir die Website geöffnet, DevTools gestartet, alle Floatings entfernt und display: flex und flex-grow angewendet. Dabei sind wir natürlich auch sichergegangen, dass keines der Elemente negative margins hatte oder eine position, die uns stören konnte. Trotzdem war das Layout kaputt. Egal was wir versucht haben, das Layout hat nicht ausgesehen und funktioniert wie in meiner Demo, obwohl wir die exakt gleichen Eigenschaften verwendet haben.

flex-grow: Funktionsweise und Anwendungsbeispiele

Wie sich herausgestellt hat, habe ich ganz einfach falsch verstanden wie flex-grow funktioniert. Deswegen habe ich mich in weiterer Folge intensiv mit der Eigenschaft auseinandergesetzt. Zufälligerweise bin ich zu dieser Zeit mit Chris Coyier von CSS-Tricks in Kontakt gekommen und somit konnte ich meine Erkenntnisse und einige praktische Beispiele in einem Artikel auf css-tricks.com zusammenfassen. Wenn also Interesse daran besteht genauer herauszufinden was genau hinter flex-grow steckt, dann kann ich diesen Artikel nur wärmstens empfehlen.
An dieser Stelle möchte ich ein großes Dankeschön an Eva Lettner fürs Lektorat richten.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *