Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Flexibilität für Flex-Items: Die Zauberformel flex: 1

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Flexibilität für Flex-Items: Die Zauberformel flex: 1

“

Nach der Fließrichtung und der Ausrichtung geht es jetzt um die Flexibilität für Flex-Items. Und dabei lernen Sie insbesondere die Zauberformel flex: 1 kennen. Ich wechsle gleich mal rüber in den Browser hier. Sie sehen oben die Beispielnavigation, die Datei aus dem Ordner zu diesem Film. Und jetzt möchte ich Ihnen demonstrieren, was flex: 1 macht. Flex ist eine Kurzschreibweise genau genommen, und wird den Flex-Items zugewiesen, also den Listenelementen. Alle anderen Eigenschaften waren bisher immer an den Flex-Container vergeben worden, und jetzt geht es an die Flex-Items. Und jetzt sage ich, alle Listenelemente li, also die Flex-Items, die sollen flex: 1 werden. So, und das ist eine Kurzform um zu sagen, lieber Browser, bitte mache alle flex-Items gleich groß. Und Sie sehen oben, die sind alle gleich groß. Ich richte jetzt den Text nochmal zentriert aus, und dann ist das schon ganz hübsch da oben. Das ist also die Flexibilität von Flex-Items, mit der Kurzschreibweise flex. Die Zahl dahinter ist übrigens eine Verhältnisangabe. Wenn ich jetzt einem einzelnen Flex-Item sage flex: 2, Sie sehen oben den Kontakt-Menüpunkt, dann wird der doppelt zu groß, wie die anderen, also flex: 1, 1, 1, und der bekommt 2. flex: 1 als Zauberformel ist aber das, was man häufig benötigt, und deswegen lasse ich das erstmal hier so stehen. Flex ist wie gesagt eine Kurzschreibweise, und wenn ich hier auf diesen kleinen Pfeil klicke, dann sehen Sie die 3 Eigenschaften flex-grow, flex-shrink und flex-basis, für die die Kurzschreibweise flex steht. Diese 3 Eigenschaften legen das Standartverhalten von Flex-Items bezüglich der Flexibilität fest. flex-grow steht normalerweise auf 0, und das bedeutet, Flex-Items dürfen nicht wachsen, sie dürfen nicht größer werden, als im Anfang berechnet. flex-shrink hingegen steht auf 1, das Schrumpfen ist also erlaubt. Und flex-basis, der dritte im Bunde, steht normalerweise auf auto, und das bedeutet, die Ausdehnung von flex-items wird durch width oder height, oder min-width oder min-height, oder max-width oder max-height bestimmt, sofern diese im CSS für die Flex-Items definiert sind, und wenn die nicht definiert sind, dann werden die Flex-Items so groß, wie ihr Inhalt. Das bedeutet das Keyword auto. Das Zusammenspiel dieser 3 Eigenschaften, ist Anfangs nicht immer ganz leicht zu verstehen, und deswegen wird Autorinnen und Autoren empfohlen, in der Spezifikation von Flexbox, dass man die "flex" shorthand, die Kurzschreibweise benutzen sollte, um die Flexibilität von Flex-Items zu kontrollieren, denn diese Kurzschreibweise macht Einstellungen, die man häufig benötigt. Anders ausgedrückt, flex:1 macht das, was man oft braucht. flex: 1 verändert nämlich die Standardwerte und setzt flex-grow auf 1. Also Wachsen ist erlaubt. flex-shrink bleibt auf 1, das wird nicht verändert, jetzt kommt bei flex-basis die Veränderung statt des Standartwertes auto, wird das auf 0% gesetzt, das heißt, eventuelle Vorgaben werden ignoriert, und der Browser bestimmt, wie groß die Flex-Items werden sollen. flex: 1 ist wie gesagt, oft das, was man braucht. Und ich möchte Ihnen jetzt noch eine kleine Eigenheit, eine kleine Überraschung zeigen, denn Sie sehen hier die Flexbox in der Standardeinstellung ohne erlaubten Umbruch. Wenn ich aber jetzt hier für den Flex-Container den Umbruch erlaube, also flex-wrap auf wrap stelle, dann sehen Sie hier oben, das, wenn flex: 1 für die Flex-Item gilt, dass in der zweiten Zeile hier, der Menüpunkt Kontakt über die gesamte Zeile geht. Und das ist oft eine Überraschung, es ist aber logisch, weil Flexbox für eindimensionale Layouts gedacht ist. Jede Zeile wird einzeln berechnet, und in der zweiten Zeile steht Kontakt, flex: 1 bedeutet Wachsen ist erlaubt, also tut er das. It's not a bug it's a feature.

Inhalt