CSS Grundlagen: Praktische Beispiele und einfache Erklärungen – Flexbox Tutorial für adaptive Layouts

English

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.

Flexbox-Achsen
Flexbox mit Hauptachse und Kreuzachse
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:

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-direction: row flex-direction: row-reverse flex-direction: column flex-direction: column-reverse

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:

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:

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.


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.