CSS Flexbox: Mehr Mög­lich­kei­ten beim Webdesign

Mit Cascading Style Sheets (CSS) lassen sich Websites an­spre­chend gestalten. Während HTML nur die wich­tigs­ten Basis-Elemente enthält, kann man per CSS komplexes Webdesign umsetzen: Bilder an­spre­chend einfügen, Text anordnen, her­aus­ste­chen­de Elemente in die Website in­te­grie­ren. Die hilf­rei­che Aus­zeich­nungs­spra­che wird stetig wei­ter­ent­wi­ckelt, um die Arbeit an Websites zu ver­ein­fa­chen und Web­de­si­gner mit neuen Ge­stal­tungs­mög­lich­kei­ten aus­zu­stat­ten. Eine solche Wei­ter­ent­wick­lung ist auch die CSS Flexbox: ein wichtiges Werkzeug, um Websites auch im mobilen Zeitalter ver­nünf­tig gestalten zu können.

Eine der Haupt­auf­ga­ben von CSS ist es, alle Elemente der Website in ein Layout zu bringen. Text, Bilder und Schalt­flä­chen lassen sich de­tail­liert anordnen. Man kann pi­xel­ge­nau festlegen, wo welches Element auf dem Bild­schirm auf­tau­chen soll. Das kann aber nur korrekt funk­tio­nie­ren, wenn man die Bild­schirm­grö­ße und die Sei­ten­ver­hält­nis­se kennt. Durch mobiles Internet mit seinen vielen un­ter­schied­li­chen Displays und Sei­ten­ver­hält­nis­sen (Smart­phones ändern die Aus­rich­tung in der Regel, wenn man sie kippt), kann man mit den starren Boxen, die man sonst aus CSS kennt, kein über­zeu­gen­des Ergebnis erzielen.

Die Flexbox (oder genauer: das CSS Flexible Box Layout) funk­tio­niert in­tel­li­gen­ter und dy­na­mi­scher: Das Layout passt sich (ganz im Sinne von Re­spon­si­ve Design) flexibel an das ver­wen­de­te Display an. Platz wird auf­ge­füllt oder Elemente enger zu­sam­men­ge­scho­ben, damit alles sichtbar bleibt. Damit das funk­tio­niert, ohne dass dabei das ge­wünsch­te Layout voll­kom­men zerrissen wird, arbeitet Flexbox mit zwei Achsen: Die Haupt­ach­se verläuft ty­pi­scher­wei­se ho­ri­zon­tal, die Kreuz­ach­se vertikal. Anhand dieser Achsen können die Elemente innerhalb der Box an­ge­ord­net werden. So lassen sich Elemente in Bezug zu­ein­an­der verteilen. CSS Flexbox sorgt dann nur noch dafür, dass der Platz um diese Elemente herum ver­nünf­tig gefüllt wird.

Wer heut­zu­ta­ge Websites designt, sollte sich mit CSS Flexbox aus­ein­an­der­set­zen. Denn die Arbeit mit variablen Bild­schirm­grö­ßen wird mit dieser Technik sehr viel einfacher. Die Funktion ist so aufgebaut, dass man auch schon mit wenigen Zeilen Code an­spre­chen­de Er­geb­nis­se erzeugen kann.

Flexbox basiert auf einem Container (flex container), in dem wiederum mehrere Elemente (flex items) un­ter­ge­bracht sind. Der Container gibt seine Ei­gen­schaf­ten an die Elemente ab – das heißt: Die Elemente sind die ei­gent­li­chen Flexboxen, die ihre Fle­xi­bi­li­tät dadurch enthalten, dass sie innerhalb des Con­tai­ners stecken.

Die beiden Achsen haben jeweils eine Richtung: In der Regel verläuft die Haupt­ach­se von links nach rechts, die Kreuz­ach­se von oben nach unten. Flexbox wird als ein­di­men­sio­na­les System be­schrie­ben: Elemente lassen sich entweder in Zeilen oder in Spalten anordnen. Eine Kom­bi­na­ti­on ist nicht vor­ge­se­hen. Ent­schei­det man sich bei­spiels­wei­se für die Anordnung der Zeile (was auch der Standard ist), wird CSS Flexbox versuchen, alle Elemente in einer Reihe an­zu­ord­nen. Dies kann man aber auch un­ter­bin­den und quasi einen Zei­len­um­bruch erzwingen.

Bevor man mit dem Ar­ran­gie­ren der Elemente beginnt, sollte man diese zunächst erzeugen. Dies geschieht wie gewohnt per HTML:

So würden die drei Elemente einfach un­ter­ein­an­der dar­ge­stellt. Per CSS verteilen wir die Begriffe nun auf der Haupt­ach­se:

In diesem Style­sheet wurde zunächst der Container definiert. Die Anweisung „display: flex;“ er­mög­licht die Flexbox. Die Elemente verteilen sich von links ausgehend nach rechts, da wir es nicht anders definiert haben. Es gibt al­ler­dings 5 ver­schie­de­ne Mög­lich­kei­ten, die sich mit der Anweisung „justify-content“ ein­stel­len lassen:

• flex-start: links­bün­dig
• flex-end: rechts­bün­dig
• center: mittig
• space-around: verteilt den Raum um die Boxen herum gleich­mä­ßig
• space-between: verteilt den Raum zwischen den Boxen gleich­mä­ßig

Der restliche Code ist bisher nur kos­me­ti­scher Natur und hat mit den ei­gent­li­chen Flexboxen nichts zu tun.

CSS geht bei Flexbox von einer ho­ri­zon­ta­len Aus­rich­tung aus. Es ist aber auch möglich, die Elemente in einer Spalte an­zu­ord­nen. Außerdem kann man die Richtung umkehren – also von links nach rechts oder von unten nach oben. Dafür verwendet man die Anweisung „flex-direction“:

• row: links nach recht
• row-reverse: rechts nach links
• column: oben nach unten
• column-reverse: unten nach oben

Dabei ist die Anweisung „justify-content: flex-end;“ nicht gleich­be­deu­tend mit „flex-direction: row-reverse;“. Während man bei der ersten Variante das letzte Element ganz rechts platziert, ändert man in der zweiten Variante die komplette Ordnung. Das erste Element im Code würde dann also ganz rechts auf­tau­chen.

Bisher haben wir die Flexboxen gleich­mä­ßig verteilt. Aber man möchte im Webdesign nicht zwingend alle Objekte gleich­be­han­deln: Ein Text soll mitunter anders dar­ge­stellt werden als bei­spiels­wei­se ein Bild. Um das zu erreichen, können wir im HTML-Text die Elemente zu­sam­men­fü­gen:

Mit „justify-content” lassen sich Elemente auf der ho­ri­zon­ta­len Achse mit­ein­an­der in ein be­stimm­tes Ver­hält­nis setzen. Möchte man seine Inhalte al­ler­dings von oben nach unten ver­schie­ben (auf der Kreuz­ach­se), braucht man die Anweisung „align-items“. Auch hierbei gibt es 5 ver­schie­de­ne Optionen:

• center: Objekte sind zentriert.
• flex-start: Objekte sind am oberen Rand bündig.
• flex-end: Objekte sind am unteren Rand bündig.
• stretch: Objekte werden auf gleiche Größe gezogen.
• baseline: Objekte werden auf der Grund­li­nie (abhängig vom Inhalt) an­ge­ord­net.

Die beiden Optionen „flex-start“ und „baseline“ scheinen auf den ersten Blick gleiche Er­geb­nis­se zu liefern. Der Un­ter­schied zeigt sich vor allem, wenn Objekte in­ein­an­der ver­schach­telt sind: Während „flex-start“ nur die beiden Flexboxen mit­ein­an­der verknüpft, die auf derselben Hier­ar­chie­ebe­ne liegen, be­rück­sich­tigt „baseline“ auch, welche Inhalte in den Boxen stecken.

Mit folgendem Code kann man also drei Objekte un­ter­schied­li­cher Größe ne­ben­ein­an­der zentriert anordnen:

Die vertikale Aus­deh­nung ist auch durch Zei­len­um­brü­che be­ein­fluss­bar. Wenn man viele Objekte in einen Container packt, würden diese einfach immer weiter ho­ri­zon­tal verlaufen, sodass der Nutzer scrollen muss und der ei­gent­lich vor­ge­se­hen Bild­schirm­be­reich verlassen wird. Mit „flex-wrap“ kann man dafür sorgen, dass sich Elemente or­dent­lich auf mehrere Zeilen verteilen.

• nowrap: kein Zei­len­um­bruch
• wrap: Zei­len­um­bruch
• wrap-reverse: Zei­len­um­bruch (mit Anordnung in um­ge­kehr­ter Rei­hen­fol­ge)

Die Anordnung ist bisher immer auf den kom­plet­ten Container angewandt worden. Alle Boxen innerhalb des Con­tai­ners halten sich an die globalen An­wei­sun­gen. Das er­leich­tert die Arbeit, schränkt aber gleich­zei­tig auch ein. CSS Flexbox gibt Web­de­si­gnern daher die Mög­lich­keit, Ausnahmen zu de­fi­nie­ren. Man verwendet hierfür „order“. Der Stan­dard­wert (wenn also nichts spe­zi­fisch definiert ist) ist 0. Der Ord­nungs­wert fügt das Objekt einer abs­trak­ten Gruppe zu. Alle Elemente, die wir bisher erzeugt haben, gehören der gleichen Gruppe an, da alle den Wert 0 haben. Von diesem Wert ausgehend kann man nun einzelne Objekte nach vorn (-1) oder nach hinten (1) ver­schie­ben.

Lässt mal also alle Elemente bis auf eines auf dem Null-Wert und gibt dem aus­ge­wähl­ten Objekt den Wert 1, wird es erst nach den anderen Elementen angezeigt. Dies kann auch wei­ter­ge­trie­ben werden, indem man andere (höhere oder tiefere) Werte vergibt. Es handelt sich hierbei um eine rein visuelle Dar­stel­lung: Die logische Folge laut HTML-Dokument wird dadurch nicht geändert.

Bisher sind wir nur auf die flexible Anordnung von Objekten ein­ge­gan­gen. Die Grö­ßen­ver­hält­nis­se sind in dem Bei­spiel­code immer über klas­si­sches CSS geregelt worden. Flexboxen sind aber auch hin­sicht­lich ihres Umfangs an­pas­sungs­fä­hig. Dafür verwendet man die Anweisung „flex“. Ähnlich wie bei Ordnung lassen sich Elemente dabei in Gruppen einteilen. Je größer der Wert ist, umso mehr Platz be­an­sprucht das jeweilige Element.