Flexbox erlaubt es, Elemente innerhalb eines flexiblen Containers beliebig aufzureihen.

Ein flexibler Container

Grundlage des flexiblen Layouts ist eine Flexbox, auchFlex-Container genannt:

.flex-container{display:flex;}

Durchdisplay: flex wird das Elternelement zum flexiblen Container.
Die Flex-Items werden nebeneinander dargestellt. Die Größe der Flex-Items ist (noch) nicht durch CSS festgelegt, sondern wird vom Browser selbst ausgewählt. Wie dies zustande kommt, wird im folgenden Kapitel erklärt.

Flex-Items

Durchdisplay: flex wird das Elternelement zum flexiblen Container.

Innerhalb eines Flex-Containers werden die direkten Kind-Elemente zuFlex-Items (englisch wörtlich etwa: Ding, Gegenstand, Partikel). Anstelle des sperrigen Ausdrucksflexible Kind-Elemente behalten wir in diesem Tutorial den englischen AusdruckFlex-Item bei.

Die Flex-Items werden entlang der Hauptachse nebeneinander angeordnet und erhalten alle die gleiche Höhe. Die Breite wird vom Browser nach einem Algorithmus berechnet, der das Seitenverhältnis der Boxen berücksichtigt. Boxen mit wenig Inhalt, wie die p-Elemente im oberen Beispiel, bleiben bei ihrer Mindestgröße und lassen rechts noch Platz frei.

Boxen wie die section-Elemente haben mehr Inhalt und verteilen sich daher über die gesamte Breite des Flex-Containers. Die jeweilige Breite richtet sich nach dem Inhalt, kann aber auch durch CSS festgelegt werden. Die Mindestbreite eines Flex-Items richtet sich nach dem längsten Wort bzw. breitesten Kindelement.

Fließrichtung

Um responsive Webseiten zu ermöglichen, können Sie bei Bedarf die Fließrichtung des flexiblen Containers ändern.

flex-direction

Die Eigenschaftflex-direction legt imFlexible Box Layout Module die Richtung der Hauptachse fest.

Folgende Angaben sind möglich:

• row: (Standardwert) die Hauptachse entspricht derSchreibrichtung, alle Items werden in Schreibrichtung angeordnet
• row-reverse: alle Items werden entgegengesetzt zur Schreibrichtung angeordnet
• column: die Hauptachse entspricht derBlockachse, alle Items werden senkrecht zur Schreibrichtung angeordnet
• column-reverse: wiecolumn, nur in umgekehrter Reihenfolge der Items

.row{flex-direction:row;}.row-reverse{flex-direction:row-reverse;}.column{flex-direction:column;}

In diesem Beispiel erhalten die div-Elemente neben dem schon bekanntendisplay: flex jeweils eine Klasse, mit der die Fließrichtung bestimmt wird.

Mithilfe dieser Eigenschaft können wir auf einfache Weise eine responsive Webseite erzeugen:

.flex-container{display:flex;flex-direction:column;}/* große Viewports */@mediaalland(min-width:30em){.flex-container{flex-direction:row;}}.flex-item{flex:auto;}

Der Flex-Container erhält mitflex-direction: column; die Anweisung, die Flex-Items untereinander zu positionieren.
Erst wenn der Viewport mit 30em breit genug ist, was mit einerMedienabfrage untersucht wird, schaltet der Browser durchflex-direction: row; auf ein Dreispaltenlayout.

flex-wrap

Sie können aber auch die Fließrichtung beibehalten und die Flex-Items über mehrere Zeilen verteilen. Die Eigenschaftflex-wrap legt fest, ob sich die Flex-Items an die Breite der Zeile anpassen sollen, oder ihre vorgegebene Breite darstellen sollen. In letzterem Fall kommt es zu einem Zeilenumbruch.

Folgende Angaben sind möglich:

• nowrap: flexible Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.
• wrap: flexible Elemente brechen, wenn nötig, senkrecht zur Schreibrichtung um.
• wrap-reverse: wiewrap, aber in die andere Richtung
• initial
• inherit

.no{flex-wrap:nowrap;}.wrap{flex-wrap:wrap;}p.flex-item{font-weight:bold;text-align:center;width:12em;}

Der Flex-Container erhält eine Maximalbreite von 45em. Die Flex-Items erhalten eine eigentlich feste Breite von 12em.

Wenn Sie das Beispiel in einem neuen Tab öffnen, sind die oberen p-Elemente innerhalb einer Zeile angeordnet. Die Breitenangabe wird nicht berücksichtigt. Dies istflex-wrap: nowrap; zu schulden.
In der unteren Reihe wird die Breitenangabe berücksichtigt und die p-Elemente verteilen sich auf zwei Reihen.
Wenn Sie den Viewport verkleinern, passt sich der flexible Container an und bildet aufgrund vonflex-wrap: wrap; mehr Reihen. Dies passiert solange, bis alle Flex-Items in einer eigenen Spalte untereinander angeordnet sind.

Die Breitenangaben bei Flex-Items wurden bis jetzt noch nicht besprochen – mehr erfahren Sie imnächsten Kapitel.

flex-flow

Die CSS-Eigenschaftflex-flow ist die zusammenfassende Eigenschaft vonflex-direction undflex-wrap. Die Reihenfolge der Angaben ist egal.

.flex-container{display:flex;flex-flow:row-reversewrap;max-width:45em;border:2pxdotted;}

Der Flex-Container erhält eine Maximalbreite und mitflex-flow: row-reverse wrap; eine umgekehrte, horizontaleflex-direction sowie einen Umbruch bei fehlendem Platz in einer Reihe.
Deshalb beginnt die Zählung rechts oben und wird nach links weitergeführt. Sobald die Reihe keinen Platz mehr für die Flex-Items hat, wird eine neue Zeile eingefügt, deren Hauptachse wieder von rechts nach links verläuft.

order

Die Eigenschaftorder legt imFlexible Box Layout (aber auch imGrid Layout) die Reihenfolge einesFlex-Items unabhängig von seinem Auftreten im HTML-Markup fest.

Folgende Angaben sind möglich:

• ganze Zahl: Standardwert ist0. Sie können entweder eine Reihenfolge für alle Flex-Items festlegen oder ein Element mit einem negativen Wertorder: -1; nach vorne positionieren.
• initial
• inherit

section{display:flex;}.ausnahme{order:-1;}

Im Beispiel wird in der zweiten und dritten Reihe jeweils einem Element die Klasseausnahme mit der Eigenschaftorder: -1; zugewiesen, wodurch dieses im Elementfluss ganz nach vorne verschoben wird.

Vergleich mit Grid Layout

Flexbox ist nicht per se responsiv, wie das Beispiel 1 auf sehr schmalen Viewports zeigt. Es kann mittels media queries umschalten. Dies können Sie im Grid Layout bereits mit Mindestgrößen realisieren.

→CSS/Tutorials/Grid/responsive Raster ohne Media Queries

Wenn Flex-Items über mehrere Zeilen umbrechen, haben Sie immer die gleichen Höhen. Mit Grid können Sie Reihenund Spalten freie und variable Größen geben.

→CSS/Tutorials/Grid/Implizite und explizite Erzeugung#feststehender Footer

Abgerufen am 11.12.2025
von "http://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Flex-Container"