Layouts mit CSS Flexbox

Was ist Flexbox und was kann man damit alles erstellen?

Flexbox ist ein CSS Modell, mit dem man eindimensionale Layouts erstellen kann.

Flex verteilt Elemente in einer bestimmten Achse, die entweder waagrecht (Zeile) oder senkrecht (Spalte) zur Seite verläuft. Es gibt zwingend eine Achse. Im Gegensatz zu CSS-Grid, welches ein Layout bzw. ein Raster über zwei Dimensionen erstellen kann. Flexbox kann nur in einer Richtung pro Div verwendet werden.

Die bestimmte Achse heisst auch Hauptachse. Manche Eigenschaften sind wichtig zur Angabe des Layouts in der entgegengesetzten Richtung, die eine Querachse bildet. Die möglichen Achsen heissen row und column.

Einfache Beispiele von der Verwendung von Flexbox

1. Display ohne Flex

Unten ist eine Div, die .parent benannt wird. Sie enthält drei weitere Divs, welche Kinderelemente sind. Die benennen wir .child. Die CSS Deklaration enthält kein Flexbox. Die Elemente werden eins nach dem anderen dargestellt.

Wenn der Browser keine Angaben zu Display in der Div findet, werden die Divs eine nach der anderen gegen unten gestapelt. Standardmässig nimmt das Kinderelement den ganzen verfügbaren Platz ein. Es gibt einen harten Umbruch.

2. Display mit Flex, Ausrichtung Row/Zeile

Die Div .parent ist mit Flex angegeben und zeigt damit die Divs in einer Reihe an. Das ist das Standardverhalten, wenn keine weiteren Angaben definiert werden. Anstatt eines harten Umbruches, fügen sich die Kinder Divs eine nach der anderen in einer Zeile. Die Hauptachse läuft waagrecht/gegen rechts.

Display mit Flex, Ausrichtung Spalte/Column

Diese .parent Div enthält ebenfalls eine Flex Deklaration. Zusätzlich dazu bestimmt man die Ausrichtung Spalte. Die Hauptachse läuft senkrecht/gegen unten.

CSS Deklarationen

Nachdem wir gesehen haben, was mit Flexbox möglich ist, wollen wir uns genauer ansehen, wie dieser Code in unseren Layouts implementiert wird.

HTML Syntax

Der HTML-Code besteht aus einem übergeordneten Container .parentund untergeordneten Elementen child. Die untergeordneten Elemente sind im übergeordneten Container enthalten. Dies ist wichtig, da die Flex-Deklaration nur für den Inhalt funktioniert, der sich im übergeordneten Container befindet.

<div class="parent">
     <div class="child">   …   </div>
     <div class="child">   …   </div>
     <div class="child">   …   </div>
</div>

CSS Syntax

Nachdem wir uns um das HTML gekümmert haben, gehen wir zu unserem CSS-Stylesheet und teilen dem übergeordneten Div mit, dass es alle darin enthaltenen Elemente mit Flex angezeigt werden soll.

.parent { display: flex; }

Nun sind wir aber noch nicht so weit. Wir müssen noch weitere Informationen in unserem Code angeben, um ein Layout zu erstellen. Einige Informationen gehen in das übergeordnete Div und andere in das untergeordnete Element.

Nochmals zur Erinnerung der CSS Syntax sieht eine CSS Deklaration folgendermassen aus: selektor { eigenschaft: wert }. Wir schauen uns vorerst nur die Eigenschaften an.

Eigenschaften für den Behälter .parent

Folgende Eigenschaften können einzeln oder miteinander verwendet werden:

• —display
• —flex-wrap
• —flex-direction
• —justify-content
• —align-content
• —align-items

Und was genau bewirken diese Eigenschaften?

display — Angabe, was angezeigt wird. z.B. Flex, Grid oder etwas anderes.

flex-wrap — Angabe, ob die Elemente in einem Flexbox-Behälter auf einer Linie liegen oder auf mehrere Zeilen verteilt werden können.

flex-direction — Angabe über die Richtung der Hauptachse Richtung (quer oder senkrecht).

justify-content / align-content / align-items — Ausrichtung der Elemente innerhalb des Flex Behälters. Diese Eigenschaften bestimmen vor allem das Layout.

Eigenschaften für die Elemente .child

Viele Eigenschaften der Flexbox wurden auf den übergeordneten Container angewendet. Die untergeordneten Elemente benötigen ebenfalls einige Informationen. Wir können hauptsächlich die Grösse jedes Elements und sein Verhalten im Verhältnis zueinander definieren.

flex-grow — Angabe darüber, ob es zusätzlichen Platz beanspruchen darf. Darf das Element sich vergrössern?

flex-shrink — Auch eine Angabe über Platzanspruch. Das Element darf verkleinert werden (aber nicht kleiner als der Inhalt).

flex-basis — Angabe über die Mindestbreite eines Elements. Darf bei Bedarf wachsen.

Zur Veranschaulichung ist hier noch CSS Syntax Beispiel

.parent {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 720px;
height: 100px;
}

.child {
width: 100px;
height: 50%;
flex: 1 0 150px;
}

Wie layoutet man mit Flex?

Mit Flex CSS–Eigenschaften Inhalte anordnen und Ausrichtungen bestimmen

Das grundlegendste Flexbox-Muster: Ein paar Elemente müssen gestreckt werden, um die volle Breite des übergeordneten Behälters auszufüllen. Dies geschieht mittels display: flex und flex-grow.

Die Eigenschaften justify-content, align-content und align-items bestimmen die Ausrichtung der Flex-Kinder (oben/unten/zentriert/rechts auf der Website).

Anwendung von Flex

Flex kann Divs innerhalb von komplexeren Elementen gut eingliedern und verteilen, wie z.B. Navigationsmenus in der Desktop Ansicht, Bildgalerien. Auch für Layout-Muster sind sie geeignet.

• Flex-Seite
• Nav 1
• Nav 2
• Airbnb

Probleme mit Flex

Internet explorer 9 bzw. Bootstrap 3 und frühere Versionen unterstützen kein Flex. Ausserdem kann Flex keine Raster aufbauen, die sowohl auf Spalten wie auch Reihen basiert sind. Dafür ist das CSS-Grid vorgesehen.

• Beispiel einer Seite mit CSS-Grid

Layouts mit Flexbox.
Diese Begriffe muss man kennen

Um effizient mit Flex zu arbeiten muss man sich zuerst mit dessen Sprache und der Bedienungsanleitung vertraut machen. Dabei hilft, wenn du den Unterschied kennst zwischen justify-content, align-content und align-items. Auch diese Eigenschaften halten einen eindimensionalen Aspekt, denn sie wirken sich auch nur in eine Richtung aus.

Justify-Content

Mit justify-content können wir die Ausrichtung aller Elemente auf der Hauptachse steuern. Das kann man mit einer ähnlichen Funktion in Indesign vergleichen und zwar mit der Ausrichtungsfunktion. Die Rahmen werden dort erstmals auch in nur eine Richtung gerückt.

• Reihe: die Elemente werden links, zentriert oder rechts angeschlagen

• 

• Spalte: die Elemente werden oben, zentriert oder unten angeschlagen

• 

Justify-content Werte

justify-content: stretch | flex-start | flex-end | center | baseline;

Beispiele

Für diese Beispiele ist die Hauptachse eine Reihe. Sie läuft von links nach rechts.

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Align-Items

Steuert die Ausrichtung aller Elementen auf der Querachse. Vorher haben wir schon bestimmt wo genau auf der Hauptachse die Elemente liegen. Z.B. Wollten wir alle Elemente rechts angeschlagen haben. Sie sollen aber gegen unten ausgerichtet werden. Dann können wir align-items verwenden. Die Elemente werden unabhängig von einander verteilt.

Die Hauptachse läuft von links nach rechts (row). Die Querachse läuft also von oben nach unten. flex-start z.B. heisst nicht wie in den oberen Beispielen gegen links ausrichten, sondern das ELement soll am Anfang der Achse stehen. Hier wäre der Beginn der Achse oben. Die Div wird gegen den oberen Rand des Behälters ausgerichtet.

Align-items Werte

{ align-items: stretch | flex-start | flex-end | center | space-between | space-around}

Beispiele

align-items: stretch;

Bei Stretch haben wir einen Spezialfall. Hier sollte im Kind Element keine Angabe über die Höhe gemacht werden, da die Elemente gestreckt werden.

.child {
width: 100px;
  /* no height: ! */
}

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: space-between;

align-items: space-around;

align-items: baseline;

Align-content

Align-content ähnelt Align-items. Die funktion steuert ebenfalls die Ausrichtung aller Elementen auf der Querachse. Der Unterschied besteht darin, dass align-content behandelt die Elemente als Gruppe. Diese Eigenschaft hat keine Auswirkung, wenn nur eine Reihe von Flex-Children vorhanden ist.

display: flex;
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

Weitere Layout-Muster

Jetzt können wir über ein Paar Layout-Muster sprechen. Wir möchten Elemente innerhalb unserer Website dehnen, damit sie responsive bleiben. Dabei sollen sie einen festen Abstand zwischen einander haben. Man verwendet die Eigenschaft und den Wertflex-grow: 1. Die Werte können entweder 0 oder 1 sein, wobei 0 soviel wie «darf nicht wachsen» und 1 «darf wachsen» heisst. Dazu noch einen Rand bestimmen durch einen beliebigen Prozentsatz oder andere Einheit: margin: 1%. Eine Breite wird nicht angegeben, da sie über das flex-grow bestimmt wird. Eine Höhe hingegen muss angegeben werden.

CSS Syntax

.app { display: flex; }

.item {
height: 100px;
margin: 1% 0.5% 1% 0.5%;
flex-grow: 1;
}

Html Syntax

<div class="app">
<div class="item"></div >
<div class="item"></div >
<div class="item"></div >
</div>

So sieht eine Variante mit drei Elementen aus. Die Elemente werden je nach Bildschirmgrösse breiter oder schmäler.

Die gleiche Funktion, aber mit fünf Elementen bzw. Divs. Im übergeordneten Div wurden keine Änderungen vorgenommen. Wir haben einfach zwei Divs hinzugefügt. Die fünf Divs verteilen sich einfach über die gesamte Breite. Das geschieht auch, weil wir keine Werte über das flex-wrap definiert haben. Der Browser quetscht standardmässig alle vorhandenen Elemente in einer Reihe.

Divs kann man unterschiedlich stark dehnen und trotzdem kann ein fester Abstand erhalten bleiben. Wenn man den Flex-Grow-Wert erhöht, vergrössert sich der Platz, auf den sich ein Element ausdehnen darf, im Vergleich zu anderen Elementen. Die Werte werden im Verhältnis zueinander aufgeteilt. Angabe erfolgt durch flex-grow: 1 oder 2 und einer margin: 1%. Das Verhältnis ist hier 1:2:1. Die gesamte Breite wird durch die Summe der Verhältnisse (4) geteilt.

.item { flex-grow: 1; }
.item-middle { flex-grow: 2; }

Im oberen Beispiel kann man aber die Grösse der Elemente links und rechts nicht festlegen. Die Breite ändert sich beliebig. Soll ein einziges Element gedehnt werden, die andere jedoch unverändert bleiben sollen ist folgende Lösung möglich. Für das statische Element kann eine feste Breite festgelegt werden, und das Element, das gedehnt werden soll, mit Flex wachsen lassen.

.item {
width: 150px;
flex-grow: 0;
}

.item-middle {
flex-grow: 1;
}

Hier noch ein Layout mit alternierendem Gitter. Nach jeder Reihe von zwei gleich grossen Elementen gibt es ein Element, das eine ganze Reihe einnimmt.

Abschluss

Hier ist ein Beispiel von einer Landing Page, die mit Flexbox gelayoutet wurde.

Musterseite Basic