06. September 2017, Alexander Gross

Flexbox Tutorial #2

Flexbox Tutorial #2

Willkommen beim zweiten Teil unseres Flexbox Tutorials.
Im ersten Teil des Tutorials wurde erklärt was Flexbox überhaupt ist. Außerdem wurden viele grundlegende Eigenschaften zum Ausrichten von HTML Elementen mit Flexbox behandelt.

Erster Teil

Falls ihr also erst jetzt zum zweiten Teil des Tutorials dazugestossen seid empfehle ich, den vorhergehenden Beitrag einmal durchzugehen, um ein Grundlegendes Verständnis über Flexbox zu erhalten.
Hier geht es zum Flexbox Tutorial #1​​​​​​​

CodePen

Unter unserem CodePen Account haben wir euch den Code hierzu bereitgestellt. Dort könnt ihr gerne nach Herzenslust selbst mit Flexbox herum spielen.
Hier geht es zu unserem CodePen Tutorial 

In diesem Tutorial werden wir mit euch über einige sehr wichtige und hilfreiche Eigenschaften wie Flex-Wrap, Order und das manipulieren der Box Größen sprechen.

 

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.

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.

Flex-Wrap

Normalerweise versuchen alle Child Elemente in einem Flexbox Container sich den darin enthaltenen Platz gleichermassen aufzuteilen.
In unserem Beispiel haben die drei Child Elemente jeweils eine Breite von 48%. So wie es ohne weitere Angaben sein sollte versuchen sie sich also den verfügbaren Platz gleichmässig aufzuteilen.

Da man dieses Verhalten mit der Eigenschaft flex-wrap aber steuern kann werden wir uns dessen nun annehmen.
Ohne weiteren Angaben hat ein Flexbox Parent Element (Container) die Eigenschaft flex-wrap: nowrap;
Genau diese Eigenschaft verhindert, dass die Child Elemente umbrechen falls sie nicht genug Platz im übergeordneten Element haben.
Wenn man das aber nicht will kann man es mithilfe von flex-wrap: wrap; ändern.
In unserem Fall brechen die Elemente nun in zwei Reihen um und versuchen sich nicht mehr den Platz untereinander aufzuteilen. Falls eines der Elemente nicht mehr in die selbe Reihe passt, wird eine neue erzeugt.
Im Beispiel haben die Child Elemente inklusive margin eine gesamte Breite von 50%. Es passen also immer genau zwei Elemente in eine Reihe.

Die Child Elemente brechen immer von oben links nach rechts und dann (wenn die Zeile voll ist) nach unten links um.
Doch auch dies kann manipuliert werden.
Ihr könnt die Reihenfolge der Child Elemente in einem Parent nämlich umdrehen.
Dies geschieht mit der Eigenschaft flex-wrap: wrap-reverse;
Jetzt wird links unten gestartet und die Elemente brechen nach recht und, wenn kein Platz mehr ist, nach links oben um.

Natürlich lässt sich das auch anwenden, wenn das Parent eine vertikale Ausrichtung (flex-direction: column;) hat.
Anstelle der Breite muss nun aber eine fixe Höhe (kann auch eine Prozentuelle Angabe sein) für das Parent und die Child Elemente vergeben werden. Ansonsten würden die Elemente einfach wieder versuchen sich die verfügbare Höhe aufzuteilen und somit nicht umzubrechen.

Bei einer vertikalen Ausrichtung brechen die Elemente von oben nach unten und dann nach rechts um. Mit wrap-reverselässt sich auch hier wieder das genaue Gegenteil erzielen.

Order

Hattet ihr schon einmal das Problem, dass ihr in der mobilen Ansicht einer Webseite die Reihenfolge von Elementen im HTML umdrehen bzw. verändern müsst? Ich denke das Problem kennen viele. Bisher war das nur über DOM Manipulationen mit JavaScript möglich. Doch das hat jetzt ein Ende.
Mit Flexbox lässt sich die Reihenfolge von Elementen in Sekundenschnelle ändern, ohne das der HTML DOM angerührt wird.
Hierfür gibt es die Eigenschaft order.

Man kann einem Child Element z.B. die Eigenschaft order: 1; vergeben und schon hat sich die Reihenfolge verändert.

Wie schon erwähnt ist das ganze vor allem auf mobilen Geräten interessant. Kleinere Bildschirme zwingen einen oft dazu Content Elemente anders anzuordnen. Dadurch ist die order Eigenschaft in Verbindung mit Media Queries wirklich mächtig.

Manipulieren von Größen

flex-basis

Das beste an Flexbox ist natürlich, dass die Elemente sehr flexibel sind.
Eine fixe Größe braucht man im Grunde nicht, da die Elemente innerhalb eines Flexbox Containers (Parent Element) sich dynamisch an den verfügbaren Platz anpassen.
Doch wie kann man dieses Verhalten nun manipulieren? Ist es möglich zu verhindern, dass die Elemente automatisch größer oder kleiner werden?
Natürlich lässt sich auch das mit der neuen "Wunderwaffe" Namens Flexbox realisieren.

Ohne Größenangaben für die Child Elemente nehmen diese immer nur soviel Platz ein wie benötigt wird.

Im Beispiel haben wir Größenangaben bisher immer mit einer prozentuellen Breite (width: 48%;) gemacht.
Das selbe lässt sich auch mit einer flex-basis bewerkstelligen.
Die flex-basis ist allerdings keine Größe im herkömmlichen Sinn. Es handelt sich hierbei nicht um eine fixe Höhe oder Breite sondern sie dient lediglich als Ausgangspunkt zur Berechnung der Größe der Elemente.
Eigentlich ist sie eine Distanz entlang des Vektors vom Parent Element.
Da sich die flex-basis also am Vektor des Parent Elementes orientiert, handelt es sich bei einem Vektor entlang der x-Achse (horizontale Ausrichtung des Parent Elementes) um die Breite der Child Elemente.
Anders gesagt geht es darum ab welcher Breite die Child Elemente starten sollen. Ausgehend von diesem Wert können die Child Elemente dann, je nach verfügbaren Platz und abhängig von anderen Child Elementen, größer oder kleiner werden.

Der Standardwert von flex-basis ist auto. Damit nehmen die Child Elemente entweder die Breite des Inhalts an oder, falls eine Breitenangabe für das Element gemacht wurde, diese fixe Breite. Im Beispiel ist diese Breite 48% groß.

Wenn wir diese Breite nun wegnehmen und eine flex-basis von 48% nehmen (flex-basis: 48%;) erzielen wir das selbe Ergebnis.
Wie bereits erwähnt ist das lediglich ein Ausgangspunkt für ein Child Element. Wenn wir jetzt zum Beispiel eine flex-basis: 100%; vergeben, dann bedeutet das nicht, dass das Element nun 100% vom Parent Element einnimmt. Es startet einfach nur bei 100%. Da aber noch andere Child Elemente vorhanden sind, wird es so lange kleiner, bis alle Elemente in eine Zeile passen.

flex-shrink und flex-grow

Mit Hilfe von flex-shrink und flex-grow kann das Verhalten, um wieviel die Elemente wachsen oder schrumpfen angepasst werden.
Wenn wir den Child Elemente zum Beispiel flex-shink: 0; flex-grow: 0; verpassen, dann zwingt man die Elemente dazu die Größe der flex-basis einzunehmen. Sie werden nun weder größer noch kleiner.
Bei einer flex-basis von 100% kommt es dann natürlich zu einem Overflow.

Wenn man flex-shrink: 1; als Eigenschaft angibt, dann werden die Child Elemente gleichmässig kleiner.

Wirklich interessant wird es aber erst dann, wenn man den Child Elementen unterschiedliche flex-grow oder flex-shrink Eigenschaften zuweist.

zum Beispiel:
Gibt man dem Child 2 und Child 3 die Eigenschaft flex-shrink: 2; dem Child 1 hingegen flex-shrink: 1; dann werden die Elemente 2 und 3 nur halb so groß wie das erste Element. Sie schrumpfen also doppelt so viel wie das Erste.

Auf diese Weise lassen sich sehr schnell und ohne viel Aufwand recht komplexe Grids erzeugen.

Das selbe Ergebnis wie es eben mit flex-shrink erzielt wurde, lässt sich ebenfalls mit flex-grow bewerkstelligen.
Wenn man bei einer flex-basis: 0; startet, kann man die Elemente so lange anwachsen lassen, bis sie den verfügbaren Platz eingenommen haben.

Weil die drei Eigenschaften flex-basis, flex-shrink und flex-grow sehr oft verwendet werden, wenn man mittels Flexbox Layouts umsetzt, gibt es hierfür auch eine Kurzschreibweise:

flex: 0 1 100%;

Beim ersten Parameter handelt es sich um flex-grow, der zweite ist flex-shrink und zum Schluss kommt flex-basis.

Und das war es auch schon mit unserem zweiteiligen Tutorial zu Flexbox.
Ich hoffe es hat euch gefallen und ihr konntet etwas neues lernen.
Gerne könnt ihr das Ganze auch bei Facebook oder Twitter teilen.

Den beiden Autoren, die euch dieses Tutorial geschrieben haben, könnt ihr natürlich auch auf Twitter folgen:
Das wäre zum einen Cornelia Eder:
Follow @ConnyEder

Und Alexander Gross:
Follow @_alexgross