--> Moderne, responsive Layouts mit der CSS Flexbox - Bunterrichten

Moderne, responsive Layouts mit der CSS Flexbox

(Letztes Update von Niklas Baumgärtler am 5.3.2021)

Heute werden wir eine kleine Einführung in das Layouten mit der CSS Flexbox machen. Wie der Name “Flexbox” schon verrät, handelt es sich dabei um eine Möglichkeit, Elemente flexibler zu gestalten als z.B. mit Tabellen und anderen fix vorgegebenen DIVs. Ziel eines CSS Flexbox-Layouts ist es unter anderem, die Adaptierung einer Webseite auf verschiedene Geräte (Desktop, Tablet, Handy, …) zu vereinfachen, indem das Layout sich zumindest zum Teil automatisch auf die verschiedenen Geräte anpasst.

Eine Weiterführung dieser Anpassung werden wir uns dann in der nächsten Lektion zu den CSS Media Queries ansehen. Aber eines nach dem anderen – lass uns erstmal damit beginnen, was eine CSS Flexbox überhaupt ist:

1. Was ist eine CSS Flexbox?

Eine CSS Flexbox ist ein HTML-Element, das mit Hilfe einer Reihe von CSS-Befehlen in eine Flexbox umgewandelt wurde. “Flexbox” steht dabei für eine Art von “Container”, die verschiedene Kinder-Elemente enthält. In den meisten Fällen wird dieser Container ursprünglich ein DIV-Element sein. Aber auch andere HTML-Elemente können als Flexboxen deklariert werden.

CSS Flexboxen sind vor allem dort sehr nützlich, wo es darum geht, den vorhandenen Platz gleichmäßig auszufüllen bzw. das Layout besser kontrollieren zu können.

2. Wie wir ein CSS Flexbox Layout erstellen

Man kann eine ganze Webseite aus verschiedenen verschachtelten Flexboxen erstellen, und im Sinne des “Responsive Layout” (ein Layout dass sich den verschiedenen Fenstergrößen anpasst) macht das auch durchaus Sinn.

Aber bevor wir das Ganze in einem größeren Webseiten-Projekt einsetzen, fangen wir einmal mit den Grundlagen an:

2.1 Die Grundlage der CSS Flexbox: “display: flex;”

Um ein HTML-Element zu einer Flexbox zu machen, müssen wir ihm den CSS-Befehl “display: flex;” zuweisen. Dazu habe ich im BODY-Block unserer .html-Datei ein DIV mit der ID “flexbox_test” eingefügt, mit zwei anderen DIVs darin, und dann in unserer .css-Datei folgendes hinzugefügt:

#flexbox_test {
   display: flex;
   margin: 20px;
}
#flexbox_test div {
	padding: 10px;
	border: 1px solid black;
}

Damit entsteht bei mir folgendes Bild:

CSS Flexbox Layout

Noch nicht sehr eindrucksvoll, oder?

Dann lass uns mal herausfinden, was wir mit unserer Flexbox alles anstellen können!

Als ersten Schritt werden wir nun lernen, wie wir die grundsätzliche Ausrichtung unserer Flexbox verändern könnnen.

2.2 Die Ausrichtung der CSS Flexbox: row oder column

Eine Flexbox kann grundsätzlich in zwei Richtungen ausgerichtet sein – als Zeile (row) oder als Spalte (colum), also horizontal oder vertikal. Im ersten Fall werden die Kinder-Elemente von links nach rechts angeordnet, im zweiten Fall von oben nach unten.

Das können wir gleich einmal ausprobieren. Wenn du dem Browser nichts dazu sagst, nimmt er automatisch die Zeilen (row)-Variante an. Damit wir einen Unterschied sehen, müssen wir ihm nun sagen, dass er stattdessen die Spalten-Variante (column, von oben nach unten) verwenden soll:

#flexbox_test {
   display: flex;
   flex-direction: column;
   margin: 20px;
}

Das Ergebnis sieht dann bei mir so aus:

CSS Flexbox Layout 2

Die Flexbox ordnet die beiden DIVs, die sich innerhalb der Flexbox befinden, nun von oben nach unten an, und lässt die DIVs so wachsen, dass sie die ganze Breite abdecken (abgesehen vom Abstand “margin: 20px”, den wir definiert haben).

Das bringt uns zum eigentlichen Haupt-Vorteil einer CSS Flex-Box: Sie verteilt ihre Kinder-Elemente möglichst ansprechend auf den verfügbaren Platz.

2.3 Die (variable) Größe der Kinder-Elemente einer CSS Flexbox definieren

Standardmäßig läuft die Verteilung gleichmäßig ab. Aber was ist, wenn wir zum Beispiel wollen dass eines der Kind-DIVs eine fixe Größe von 300px bekommt, und das andere den restliche Platz ausfüllt? Das könnte dann im Source-Code so aussehen (ich habe die Flexbox wieder auf row, auf Zeile umgestellt):

#flexbox_test div:nth-child(1) {
	flex-basis: 400px;
}
#flexbox_test div:nth-child(2) {
	flex-grow: 1;
}

Dabei bekommt das erste DIV die flex-basis von 400px. Die flex-basis ist gewissermaßen die Grundbreite, von der die Flexbox ausgeht, bevor sie versucht, den Rest des Eltern-Elements möglichst schön auszufüllen.

2.4 Die Kinder-Elemente einer CSS Flexbox wachsen lassen

Das zweite DIV bekommt den CSS-Befehl “flex-grow: 1;” zugewiesen. Das bedeutet, es darf wachsen und den Rest der Flexbox ausfüllen.

Wenn wir nun das Fenster verändern, bleibt die Breite des ersten DIV immer auf 400px, die des zweiten wird aber je nach Fenster-Größe eben kleiner oder größer.

Das Ergebnis sieht bei mir dann so aus:

CSS Flexbox Layout 3

Falls du selbst versucht hast die Größe des Fensters zu verändern, wird dir aufgefallen sein, dass sich das Fenster nicht kleiner als eine bestimmte Größe verändern lässt.

Ein Grund könnte sein, dass das Fenster selbst aufgrund von Browser-Einstellungen nicht kleiner als eine bestimmte Größe werden darf.

Ein anderer kann sein, dass das erste DIV eine fixe Größe von 400px zugewiesen bekommen hat, und der Browser noch nicht weiß, dass die DIVS innerhalb der Flexbox auch schrumpfen dürfen.

2.5 Die Kinder-Elemente einer CSS Flexbox schrumpfen lassen

Damit das klappt, müssen wir den Elementen, die auch schrumpfen können sollen, den Befehl “flex-shrink: 1;” zuweisen. Dann darf unser erstes DIV falls es notwendig ist auch schrumpfen:

#flexbox_test div:nth-child(1) {
	flex-basis: 400px;
	flex-shrink: 1;
}

Wenn wir nicht wollen, dass unsere Kinder-Elemente der CSS Flexbox wachsen oder schrumpfen, dann können wir ihnen den Befehl “flex-grow: 0;” bzw. den Befehl “flex-shrink: 0;” zuweisen.

2.6 Wachsen oder Schrumpfen in einem bestimmten Verhältnis

Aber was würde eigentlich passieren, wenn wir statt 0 (= nicht wachsen/schrumpfen) oder 1 (=wachsen/schrumpfen) eine andere Zahl einsetzen würden?

Dann wachsen/schrumpfen die Kinder-Elemente unserer Flexbox in dem Verhältnis das dadurch entsteht. Ein Beispiel:

Nehmen wir an, wir haben eine Flexbox mit der row-Ausrichtung (Zeile). Der Einfachheit halber haben alle vier Kinder-Elemente eine flex-basis von 25%. Wenn wir nun wollen, dass die Kinder-Elemente im Verhältnis 1:1:3:5 wachsen und verkleinern wenn das Fenster vergrößert/verkleinert wird, würde das im Source-Code dann so aussehen:

#flexbox_test div:nth-child(1) {
   flex-grow: 1;
   flex-shrink: 1;
}
#flexbox_test div:nth-child(2) {
   flex-grow: 1;
   flex-shrink: 1;
}
#flexbox_test div:nth-child(3) {
   flex-grow: 3;
   flex-shrink: 3;
}
#flexbox_test div:nth-child(4) {
   flex-grow: 5;
   flex-shrink: 5;
}

Die ersten beiden Kinder wachsen/schrumpfen also gleich schnell, das dritte 3x so schnell und das vierte sogar 5x so schnell.

Wenn es beispielsweise darum geht eine Webseite auf verschiedenen Bildschirmen möglichst ähnlich aussehen zu lassen, können diese Verhältnisse sehr nützlich sein.

Achtung: Das Wachstum/das Schrumpfen/die flex-basis beziehen sich immer auf die Richtung, die im Flexbox-Element definiert ist. Bei row wachsen/schrumpfen die Elemente in die Länge, bei column wachsen/schrumpfen sie in die Höhe.

2.7 CSS Flexbox Layout: In die nächste Zeile springen lassen oder nicht?

Aber was passiert, wenn die Kinder-Elemente einer Flexbox nicht mehr in eine Zeile/Spalte passen? Standardmäßig versucht der Browser sie trotzdem hineinzubekommen, indem er sie soweit schrumpft wie möglich. Bei einem row-Layout zum Beispiel wird er dann versuchen die Zeile zu vergrößern, etwa so:

CSS Flexbox Layout 4

Wenn wir wollen, dass die Elemente eher in die nächste Zeile/Spalte kommen, können wir das über den CSS-Befehl “flex-wrap: wrap;” tun (ein “flex-wrap: nowrap;” wäre dann das Gegenteil). Diesen Befehl müssen wir auf den Flexbox-Container anwenden, also das Eltern-DIV, dass zur Flexbox gemacht wurde:

#flexbox_test {
	display: flex;
	flex-direction: row;
	margin: 20px;
	flex-wrap: wrap;
}

Das Ergebnis sieht dann so aus:

CSS Flexbox Layout 5

3. Horizontale und Vertikale Zentrierung innerhalb der  Flexbox

Und nun kommen wir zu einem der Gründe, warum Flexboxen so beliebt sind: mit ihnen kann man vergleichsweise einfach nicht nur eine horizontale, sondern auch eine vertikale Zentrierung hinbekommen.

Horizontal ist es ja auch ohne der Flexbox relativ einfach, z.B. mit einem “text-align: center;” – aber eine vertikale Zentrierung ist sonst traditionell sehr kompliziert.

3.1 Zentrierung mit Hilfe einer Flexbox

Mit Hilfe einer CSS Flexbox hingegen braucht es für beide Zentrierungs-Arten nur jeweils einen Befehl, nämlich “justify-content: center;” und “align-items: center;” – hier sind die beiden im Source-Code:

#flexbox_test {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 20px;
	flex-wrap: wrap;
}

Nun gibt es noch ein kleines Problem: Je nach Ausrichtung unserer Flexbox (row oder column) ist der eine Befehl für die horizontale, der andere für die vertikale Zentrierung zuständig.

3.2 Debugging durch Auskommentieren

Du kannst dir aber auch einfach beide merken, und dann jeweils ausprobieren, welchen du in welchem Fall brauchst. Das Ausprobieren geht am einfachsten, indem du einfach beide hinschreibst und dann einmal den einen, dann den anderen auskommentierst. In CSS kannst du mit einem // den Rest der Zeile auskommentieren (= unwirksam machen). Z.B. wäre der “justify-content: center;”-Befehl in diesem Fall auskommentiert, also unwirksam gemacht:

#flexbox_test {
	display: flex;
	flex-direction: row;
	//justify-content: center;
	align-items: center;
	margin: 20px;
	flex-wrap: wrap;
}

Die Vorgehensweise mit dem Auskommentieren ist ganz generell oft sinnvoll wenn du versuchen willst herauszufinden warum sich eine Webseite nicht so verhält wie du es willst. So findest du vergleichsweise einfach den/die “schuldigen” Befehl(e) und damit die Ursache des “bugs”, also des Fehlers.

Profi-Tipp: In der Informatik nennt man die Fehlersuche auch “debugging” (von “bug”, Ungeziefer bzw. Fehler, also frei übersetzt “Fehler entfernen”). Die Wörter “bug”, “debugging” bzw. “debuggen” (die eingedeutschte Verb-Form) solltest du dir auf jeden Fall merken, diese Wörter werden häufig benutzt.

Das wars fürs erste als Einführung zum CSS Flexbox Layout. Wenn du mehr darüber wissen willst und gut in Englisch bist, gibt es unter diesem Link eine richtig gute und übersichtliche Erklärung, die noch weiter in die Tiefe geht. Oder stell einfach hier eine Frage 🙂

Wirklich interessant werden unsere Flexboxen neben der einfachen Zentrierung aber vor allem dort, wo es um eine automatische Anpassung an verschiedene Geräte und Fenster-Größen geht (Responsive Design).

Und deswegen werden wir uns nun bevor wir uns an die Erstellung unserer ersten “richtigen” Webseite machen noch die Media Queries ansehen. Die sind nämlich ebenso genau für diesen Zweck gedacht, und besonders in Kombination mit Flexboxen sehr mächtige Werkzeuge.

Bereit?

Dann auf zur nächsten Lektion!

Portrait Niklas Baumgärtler

Niklas Baumgärtler

Niklas Baumgärtler interessiert sich für die Kunst der Begeisterung und macht gerne Wechsel- und Hebelwirkungen in Sozialen Systemen sicht- und erlebbar. Mehr über Niklas Baumgärtler...

Über bunterrichten

bunterrichten ist ein Gegenkonzept zum sonst üblichen Unter-richten, das auf Anpassung und Unterordnung basiert. Stattdessen geht es darum, Menschen über Stimmigen Kontakt zur Entfaltung zu verhelfen - eben "Menschen helfen aufzublühen".

Niklas Baumgärtler ist Lehrer/Trainer und Werkzeugmacher für Webseiten und Soziale Systeme. Er ist seit Mai 2018 aus Überzeugung selbstständig, und vor allem in der Erwachsenen-Bildung tätig.