CSS Grundlagen: Schritt-für-Schritt Anleitung – Flexbox für responsive Designs verstehen und anwenden

CSS Flexbox Tutorial: grundlegende Konzepte

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:

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:

Ü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 bei space-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 bei space-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.