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