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 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:

E-CONOMIX Parent E-CONOMIX Child 1 E-CONOMIX Child 2 E-CONOMIX Child 3

Mit display: flex; erreicht man folgende Ausgabe:

E-CONOMIX Child 1 E-CONOMIX Child 2 E-CONOMIX Parent E-CONOMIX Child 3

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;

E-CONOMIX Child 1 E-CONOMIX Parent E-CONOMIX Child 2 E-CONOMIX Child 3

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.

E-CONOMIX Parent E-CONOMIX Child 2 E-CONOMIX Child 1 E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3 E-CONOMIX Child 3

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;

E-CONOMIX Parent E-CONOMIX Child 2 E-CONOMIX Child 1 E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3 E-CONOMIX Child 3

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.

E-CONOMIX Child 1 E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3 E-CONOMIX Parent E-CONOMIX Child 2 E-CONOMIX Child 3

 

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;

E-CONOMIX Parent E-CONOMIX Child 1 E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3 E-CONOMIX Child 2 E-CONOMIX Child 3

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. 

E-CONOMIX Parent E-CONOMIX Child ı E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3

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:

E-CONOMIX Child 1 E-CONOMIX Child 1.1 E-CONOMIX Child 1.2 E-CONOMIX Child 1.3 E-CONOMIX Child 2 E-CONOMIX Parent E-CONOMIX Parent-Child E-CONOMIX Child 4 E-CONOMIX E-CONOMIX Child 4.1 Child 3 E-CONOMIX Child 4.2

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.

Ein Gedanke zu “Flexbox Tutorial #1

Schreibe einen Kommentar

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