30. August 2017, Cornelia Eder

Flexbox Tutorial #1

Flexbox Tutorial #1

Wir waren bei unserem Innovationday am Freitag, dem 25.8. flei├čig und haben uns Flexbox n├Ąher angesehen und beschlossen dar├╝ber zwei Flexbox Tutorial-Blogposts zu schreiben.
Grunds├Ątzlich m├Âchten wir darauf eingehen, was Flexbox genau ist, von welchen Browsern es unterst├╝tzt wird und wir wollen ebenfalls ein paar Best Practices dazu anf├╝hren.

Was ist Flexbox?

Flexbox ist ein CSS Box Model, welches f├╝r User Interface Design optimiert ist. Mit Flexbox kann man sehr leicht Elemente horizontal und vertikal ausrichten und mehrere Elemente miteinander verschachteln. Au├čerdem erlaubt es dem Element sich dynamisch zu vergr├Â├čern bzw. zu verkleinern.
Flexbox ist eine Spezifikation von CSS3 und kann daher out of the Box verwendet werden und es muss keine eigene Libary daf├╝r eingebunden werden.

Welcher Browser unterst├╝tzt Flexbox?

Grunds├Ątzlich unterst├╝tzt jeder moderne Browser Flexbox.
Eine detaillierte Auflistung kann hier eingesehen werden: http://caniuse.com/#search=flexbox
Die einzige Ausnahme bietet hierbei der Internet Explorer 10. Flexbox wird in diesem zwar unterst├╝tzt nur muss man spezielle Prefixe verwenden um ein Ergebnis zu bekommen. Diese sind hier aufgelistet: https://msdn.microsoft.com/de-de/library/hh673531(v=vs.85).aspx

Wie verwende ich Flexbox?

Kommen wir nun zum eigentlichen Anwendungsteil.
Flexbox ist sehr einfach zu verwenden. Zuerst ben├Âtigt man ein Parent und ein Child Element im HTML Code.
Um Flexbox anzuwenden ist es nur n├Âtig dem Parent Element die Eigenschaft display: flex; zu geben.

Ohne display: flex; w├╝rde die Ausgabe folgenderma├čen aussehen:

Mit display: flex; erreicht man folgende Ausgabe:

Sobald man display: flex; auf das Parent Element anwendet, werden die Block Elemente darin zu Flexbox Child Elementen. Im Prinzip ist ein Flex Parent ein Vektor. Es is im Grunde ein Pfeil, der entweder horizontal entlang der X-Achse oder vertikal entlang der Y-Achse ausgerichtet ist.

Ohne weitere Angaben startet ein Flex Parent Element als Zeile (Row) also entlang der X-Achse. Und die darin enthaltenen Child Elemente kann man dann entlang dieses Vektors manipulieren.

Horizontale Ausrichtung (Row)

Um die Child Elemente horizontal innerhalb des Parent Elementes zu zentrieren bzw. zu positionieren ben├Âtigt man nur die Eigenschaft: jusitfy-content: center;

 

Um die Child Elemente am Anfang des Vektors zu positionieren ben├Âtigt man die Eigenschaft: justify-content: flex-start;

Und um diese am Ende zu platzieren: justify-content: flex-end;

Wenn man will, dass sich die Child Elemente mit Leerraum innerhalb des Parent Elementes aufteilen verwendet man: justify-content: space-between;

Man kann den Leerraum auch um die gesamten Child Elemente legen mitthilfe der Eigenschaft: jusitfy-content: space-around; 

In Flexbox werden die Child Elemente standardm├Ą├čig immer gleich gro├č dargestellt. Wenn also ein Child Elemente mehr Text hat, dann werden die anderen Child Elemente ebenfalls gr├Â├čer.

Dieses Verhalten kann mit einer vertikalen Ausrichtung der Elemente manipuliert werden. Hierf├╝r ist folgende Eigenschaft zust├Ąndig: align-items: (flex-start) (flex-end) (center) (stretch) (baseline);
Der Standardwert hierbei ist align-items: stretch; Dieser f├╝hrt dazu, dass alle Elemente gleich hoch angezeigt werden.

Um die Elemente vertikal an den Beginn des Vektors zu verschieben verwendet man: align-items: flex-start;

Hier ist die Ausrichtung der Elemente wieder relativ zur Ausrichtung des Vektors.

Um das Element am Ende des Vektors auszurichten verwendet man: align-items: flex-end;

Um die Elemente vertikal zu zentrieren verwendet man: align-items: center;

Mit der Eigenschaft align-items: baseline; werden die Elemente an der Grundlinie des Textes ausgerichtet.

Es ist auch m├Âglich die Eigenschaften des align-items auf jedes Einzelne Child Element anzuwenden und nicht nur im Parent zu verwenden. Hierf├╝r kann man die Eigenschaft align-self: (flex-start) (flex-end) (center) (stretch) (baseline);verwenden.

Vertikale Ausrichtung (Column)

Um die Ausrichtung des Vektors nun umzudrehen und ihn vertikal anstelle von horizontal auszurichten ben├Âtigt man die Eigenschaft: flex-direction: column;

Sobald dies geschieht sind die Child Elemente entlang der y-Achse also vertikal ausgerichtet. Die Eigenschaft justify-content richtet sich dann entlang der y-Achse aus und die Eigenschaft align-items entlang der x-Achse. Also genau umgekehrt. Somit wird das Element mit align-self: flex-start nicht mehr nach oben sondern nach links ausgerichtet.

Verschachtelung

Man kann Flexbox Elemente auch ineinander verschachteln und den verschachtelten Parent Elemente, die dann gleichzeitig auch child Elemente sind, eine eigene Ausrichtung geben. 

Auch bei den Verschachtelten Elementen kann man wieder die verschiedenen Eigenschaften von Flexbox anwenden. Zum Beispiel kann man die Elemente im Parent-Child Element entlang der Y-Achse ausrichten:

Fazit

Mit Flexbox kann man spielend leicht Elemente ausrichten und man muss nicht mehr Ewigkeiten beim Zentrieren oder Anordnen von Elementen herumprobieren um das gew├╝nschte Ergebnis zu bekommen.

Auf Codepen haben wir den Code von dem Tutorial zur Verf├╝gung gestellt und hier kann man auch die ganzen Eigenschaften ausprobieren: https://codepen.io/economix/pen/EvdJRb

N├Ąchste Woche folgt ein weiterer Teil zu Flexbox, wo Eigenschaften wie flex-wrap, flex-basis und so weiter vorgestellt werden.