CSS Flexbox Tutorial
Im Web-Design bezeichnet der Begriff Layout die Art und Weise, wie eine Webseite auf dem Bildschirm dargestellt wird. Im Zeitalter mobiler Endgeräte und einer Vielzahl unterschiedlicher Auflösungen ist Responsive Web-Design wichtiger als jemals zuvor. Eine Website muss sich heute an die Nutzerbedürfnisse anpassen und und die Inhalte übersichtlich präsentieren. Ein gutes Layout sorgt dafür, dass die Webseite leicht zugänglich ist und alle Inhalte intuitiv zu finden sind.
Flexbox (CSS Flexible Box Layout Module) ist neben CSS Grid eine der beiden wichtigsten Techniken, um flexible Layouts zu erstellen.
Flexbox ist ein eindimensionales Layout-Modell. Das bedeutet, dass entweder Zeilen oder Spalten behandelt werden, aber niemals beides zusammen. Diese Layout-Methode ist vor allem dann zu empfehlen, wenn man mehrere Elemente entweder zeilenweise oder spaltenweise anordnen möchte.
Im Gegensatz zum früheren Float-Modell wurde Flexbox entwickelt, um flexible und responsive Layouts zu erstellen. Deshalb stehen hier sehr leistungsfähige und komfortable Möglichkeiten zum Ausrichten benachbarter Elemente zur Verfügung.
Grundlagen von Flexbox
Flexbox basiert auf einem Eltern-Element (Flex-Container), in dem mehrere Kind-Elemente (Flex-Item) eingefügt werden. Damit der Container die Information erhält, dass mit Flexbox gearbeitet werden soll, wird die Eigenschaft display: flex
verwendet. Die im Flex-Container definierten Eigenschaften werden an alle Flex-Items vererbt.
Flexbox wirkt nur auf direkte Kind-Elemente des Flex-Containers. Alle weiteren Verschachtelungen werden nicht berücksichtigt.
Im Flex-Container gibt es zwei Achsen – die Hauptachse und die Kreuzachse. Die Hauptachse verläuft standardmäßig horizontal von links nach rechts, die Kreuzachse vertikal von oben nach unten.
Beachte:Flexbox ist besonders nützlich, wenn zwei oder mehr Elemente in einem bestimmten Bereich positioniert werden sollen.
Wenn es darum geht, das vollständige Layout für eine Webseite zu erstellen, ist CSS Grid besser geeignet, da es speziell für diese Aufgabe entwickelt wurde.
Die Flex-Items werden entlang der Hauptachse angeordnet und haben alle die gleiche Höhe. Mit der Container-Eigenschaft flex-direction kann man die Richtung der Hauptachse ändern.
Erlaubt sind folgende Werte:
-
Mit
flex-direction: row
werden die Items horizontal von links nach rechts angeordnet. -
Mit
flex-direction: row-reverse
werden die Items horizontal von rechts nach links angeordnet. -
Mit
flex-direction: column
werden die Items vertikal von oben nach unten angeordnet. -
Mit
flex-direction: column-reverse
werden die Items vertikal von unten nach oben angeordnet.
flex-direction: row
ist die Standard-Einstellung.
Beachte:
Mit flex-direction
werden die beiden Achsen nicht gemeinsam gedreht, sondern es wird nur die Hauptachse gedreht. Die folgenden Grafiken zeigen die Orientierung der Kreuzachse im Verhältnis zur Hauptachse.
Übersicht über die verschiedenen Varianten von flex-direction.
Flex-Items auf der Hauptachse positionieren
Standardmäßig werden die Flex-Items am Anfang der Hauptachse positioniert. Um die Flex-Items entlang der Hauptachse zu positionieren, wird die Eigenschaft justify-content verwendet.
Die justify-content-Eigenschaft wird im Flex-Container definiert.
Für die Positionierung der Items gibt es zahlreiche Werte:
-
Mit
justify-content: flex-start
werden die Flex-Items am Anfang der Hauptachse ausgerichtet. Am Ende der Hauptachse kann ggf. freier Raum bleiben. -
Mit
justify-content: flex-end
werden die Flex-Items am Ende der Hauptachse ausgerichtet. Am Anfang der Hauptachse kann ggf. freier Raum bleiben. -
Mit
justify-content: center
werden die Flex-Items zentriert ausgerichtet. Am Anfang und Ende der Hauptachse kann ggf. freier Raum bleiben. -
Mit
justify-content: space-between
wird das erste Flex-Item am Anfang der Hauptachse ausgerichtet, das letzte am Ende der Hauptachse. Die übrigen Items werden entlang der Hauptachse gleichmäßig verteilt. Zwischen den Items entstehen Abstände. -
Mit
justify-content: space-around
werden die Flex-Items wie beispace-between
gleichmäßig auf der Hauptachse verteilt. Aber es entsteht ein Abstand vor dem ersten und nach dem letzten Item. -
Mit
justify-content: space-evenly
werden die Flex-Items wie beispace-around
gleichmäßig auf der Hauptachse verteilt. Aber alle Abstände sind gleich.
Die Anweisung justify-content: flex-end ist nicht identisch mit der Anweisung flex-direction: row-reverse.
Während bei der ersten Variante (justify-content: flex-end) das letzte Item ganz rechts positioniert wird, wird bei der zweiten Variante (flex-direction: row-reverse) die Reihenfolge der Items komplett geändert und das erste Item rechts positioniert.
Flex-Items auf der Kreuzachse positionieren
Mit der Eigenschaft justify-content können die Items auf der Hauptachse in einem bestimmten Verhältnis positioniert werden. Möchte man jedoch die Inhalte auf der Kreuzachse ausrichten, muss man dafür die Eigenschaft align-items verwenden.
Die Eigenschaft align-items wird im Flex-Container definiert.
Für das Positionieren auf der Kreuzachse wurden in Flexbox einige Möglichkeiten implementiert.
Folgende Werte sind hier möglich:
-
Mit
align-items: flex-start
werden die Flex-Items am Anfang der Kreuzachse ausgerichtet. Am Ende der Kreuzachse kann ggf. Raum frei bleiben. -
Mit
align-items: flex-end
werden die Flex-Items am Ende der Kreuzachse ausgerichtet. Am Anfang der Kreuzachse kann ggf. Raum frei bleiben. -
Mit
align-items: center
werden die Flex-Items in der Mitte der Kreuzachse ausgerichtet. Am Anfang und Ende der Kreuzachse kann ggf. freier Raum bleiben. -
Mit
align-items: stretch
werden die Flex-Items so gestreckt, dass sie den Raum in Richtung der Kreuzachse vollständig ausfüllen. Die Flex-Items sollten keine Eigenschaft haben, die ihre Länge in Richtung der Kreuzachse bestimmt (z.B. height. -
Mit
align-items: baseline
werden die Flex-Items an der Grundlinie des Flex-Containers ausgerichtet.
Standard-Eigenschaften der Flex-Items
Neben der Positionierung über den Flex-Container gibt es auch die Möglichkeit, die Items selbst zu beeinflussen. Für die Items gibt es einige nützliche Eigenschaften.
Die Eistellungen für die Items kann man mit klassischen CSS-Eigenschaften und dem Box-Modell festlegen. Außerdem gibt es die Flexbox-Eigenschaften
flex-grow,
flex-shrink und
flex-basis,
um die Größe der Elemente zu beeinflussen. Die Eigenschaft order dient dazu, die Reihenfolge der Elemente zu ändern.
-
Mit
flex-grow
wird festgelegt, ob das Flex-Item größer werden darf.Die Eigenschaft flex-grow legt den Wachstums-Faktor für die Aufteilung des freien Raums fest, wenn der Flex-Container größer ist als die Inhalte der Items.
flex-grow bestimmt, wie ein Flex-Item relativ zu anderen Items wächst. Der Default-Wert 1.
Wenn mehrere Items die Eigenschaft flex-grow: 1 haben, teilen sie sich den verfügbaren freien Platz zu gleichen Teilen.
flex-grow: 2 bedeutet nicht, dass das Item doppelt so groß wird wie die Items mit der Eigenschaft flex-grow: 1.Es bedeutet nur, dass sein Anteil am Wachstum doppelt so groß ist wie der Anteil der Items mit flex-grow: 1.
flex-grow: 0 bedeutet, dass das Item nicht vergrößert wird.
-
Mit
flex-shrink:
wird festgelegt, ob das Flex-Item kleiner werden darf (aber nicht kleiner als der Inhalt).Die Eigenschaft flex-shrink gibt den Schrumpfungs-Faktor für ein Flex-Item an. Wenn die Größe aller Flex-Items größer ist als der Flex-Container, können die Items entsprechend ihrem Schrumpfungs-Faktor schrumpfen, so dass sie in den Container passen. Der negative Raum jeder Flex-Reihe wird auf alle Flex-Items verteilt, die einen shrink-Wert größer als 0 haben.
flex-shrink gibt an, wie stark das Flex-Item im Verhältnis zum Rest der Flex-Items im Container schrumpft, wenn der negative Raum verteilt wird.
Der flex-shrink-Faktor berücksichtigt die flex-basis-Größe, um zu verhindern, dass kleinere Elemente auf 0 schrumpfen, bevor größere Elemente deutlich verkleinert werden.
-
Mit
flex-basis
wird die initiale Größe eines Flex-Items entlang Hauptachse festgelegt. Diese Eigenschaft bestimmt die Größe der Content-Box.Wenn der Wert von flex-basis nicht auto ist und die Breite (bzw. Höhe im Fall von flex-direction: column für das Flex-Item definiert ist, hat der hier gewählte Wert Vorrang.
Wenn flex-basis für das Item nicht angegeben wird, richtet sich die Breite (bzw. Höhe bei flex-direction: column nach dem Wert für width bzw. height des Items.
Die Eigenschaft flexist die Kurzschreibweise (Englisch: Shorthand-Property) für die Eigenschaften flex-grow, flex-shrink und flex-basis.
Flex-Items in Zeilen und Spalten anordnen
Analog zur Eigenschaft justify-content, die die Verteilung der Elemente entlang der Hauptachse steuert, dient die Eigenschaft align-content dazu, die Flex-Items auf der Kreuzachse zu verteilen.
Einen sichtbaren Effekt hat align-content nur, wenn mehr als eine Reihe Flex-Items vorhanden ist.
-
Mit
align-content: flex-start
werden die Flex-Items am Anfang der Kreuzachse ausgerichtet. Am Ende der Kreuzachse kann ggf. freier Raum bleiben. -
Mit
align-content: flex-end
werden die Flex-Items am Ende der Kreuzachse ausgerichtet. Am Anfang der Kreuzachse kann ggf. freier Raum bleiben. -
Mit
align-content: center
werden die Flex-Item zentriert ausgerichtet. Am Anfang und Ende der Kreuzachse kann ggf. freier Raum bleiben. -
Mit
align-content: space-between
wird das erste Flex-Item am Anfang der Kreuzachse ausgerichtet, das letzte am Ende der Kreuzachse. Die übrigen Items werden entlang der Kreuzachse gleichmäßig verteilt. Zwischen den Items entstehen Abstände. -
Mit
align-content: space-around
werden die Flex-Items wie bei space-between gleichmäßig auf der Kreuzachse verteilt. Aber es entsteht ein Abstand vor dem ersten und nach dem letzten Item. -
Mit
align-content: space-evenly
werden die Flex-Items wie bei space-around gleichmäßig auf der Kreuzachse verteilt. Aber alle Abstände sind gleich.