Die Nutzung mobiler Geräte wie Tablets oder Smartphones nimmt stetig zu. Das fordert Websitedesigner und -designerinnen heraus, denn die Inhalte müssen auf jedem Gerät ansprechend präsentiert werden. Eine dynamische Lösung bietet der Container CSS Flexbox, mit dem Elemente flexibel ausgerichtet werden können.
Wie eine CSS Flexbox funktioniert, welche Eigenschaften Ihnen für die Klassifizierung zur Verfügung stehen und wo der Unterschied zum Grid-Layout liegt, klären wir im Folgenden.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
Flexbox-Tutorial: Diese Grundlagen sollten Sie kennen
Um zu verstehen, wie eine Flexbox funktioniert, müssen Sie zunächst einmal die grundlegenden Eigenschaften und Funktionen von Cascading Style Sheets (CSS) kennen. Während Sie mit HTML die Elemente Ihrer Website strukturieren, wird die CSS-Datei genutzt, um das Design zu definieren. Mithilfe von CSS können Sie Elemente beispielsweise anordnen, Bilder mit Rahmen versehen, Hintergrundfarben oder Schriftarten bestimmen.
Durch die zunehmende Nutzung von Mobilgeräten stehen Websites jedoch vor der Herausforderung, dass das Design auf verschiedenen Bildschirmgrößen ansprechend dargestellt werden muss. Die Flexbox bietet hierbei eine intelligente Lösung, da sie sich dynamisch an das verwendete Gerät anpasst. Die Elemente, die in der CSS Flexbox enthalten sind, werden horizontal oder vertikal verschoben, damit sie in den jeweiligen Bildschirm passen.
Wie funktioniert eine Flexbox?
Die Flexbox arbeitet mit einer Hauptachse und einer Querachse. Auf der Hauptachse werden die Elemente mit flex-direction vertikal — also in Zeilen — angeordnet. Die Querachse wiederum verschiebt die Elemente spaltenartig auf der horizontalen Linie. Die vier dazugehörigen Werte für die Verschiebung der Elemente sind:
- row: Elemente werden in Schreibrichtung angeordnet.
- row-reverse: Elemente werden entgegen der Schreibrichtung angeordnet.
- column: Elemente werden vertikal zur Schreibrichtung angeordnet (Blockachse).
- column-reverse: Elemente werden umgekehrt zur column angeordnet.
Warum sollte man eine Flexbox verwenden?
Die Flexbox bietet innerhalb des CSS eine flexible Option, um Inhalte responsive darzustellen. Die Klassifizierung erlaubt eine freie Fließrichtung der Elemente, die in Zeilen oder Spalten angeordnet werden können. Selbst der Viewpoint lässt sich mit der CSS Flexbox durch dynamische Größen anpassen. Außerdem können Elemente auch abweichend zum HTML-Doc ausgerichtet werden.
Der Flex-Container enthält alle Elemente
Die CSS Flexbox wird auch als Flex-Container bezeichnet. In diesem Container befinden sich alle Elemente, die ein Webprojekt beinhalten soll. Um mit der Flexbox zu arbeiten, benötigen Sie die Spezifikation display: flex.
Ältere Schreibweisen dieser Regel — wie beispielsweise display: box oder display: Flexbox — sind teilweise noch in Quellcodes zu finden, entsprechen jedoch nicht mehr der korrekten Syntax. Innerhalb des Flex-Containers befinden sich die sogenannten Flex-Items. Hier ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.flex-item1 {
background-color: grey;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 20px;
}
.flex-item2 {
background-color: grey;
width: 200px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">Box 1</div>
<div class="flex-item2">
<div class="flex-item3">Box 2</div>
<div class="flex-item3">Box 3</div>
</div>
<div class="flex-item1">Box 4</div>
</div>
Quelle: Screenshot w3schools Editor
Umbruch erwirken mit flex-wrap
Möchten Sie die Elemente der CSS Flexbox beispielsweise mit row anordnen, aber dennoch spaltenartige Umbrüche erzielen, hilft Ihnen die Eigenschaft flex-wrap. Sie legt fest, ob sich die Größe eines Elements an die Zeile anpasst oder ob die tatsächliche Breite ausgespielt wird. Sie haben die Auswahl zwischen folgenden Werten:
- nowrap: Elemente liegen alle in einer Reihe.
- wrap: Elemente erzeugen Umbrüche, wenn der Platz einer Zeile nicht ausreichend ist.
- wrap-reverse: Elemente werden umgekehrt zu wrap dargestellt.
- initial: Element nimmt Browser-Standardwert an.
- inherit: Element nimmt Wert des Elternelements an.
Hinweis: Mit flex-flow haben Sie die Möglichkeit, die Eigenschaften von flex-direction und flex-wrap zusammenzufassen. Welche Reihenfolge die Werte haben, spielt dabei keine Rolle.
.flex-container {
display: flex;
flex-flow: column nowrap;
}
Ausrichtung bestimmen mit align-items, align-content und justify-content
Neben der allgemeinen Ausrichtung bietet Ihnen die CSS Flexbox auch die Option, einzelne Elemente entlang der Quer- und Hauptachse zu verteilen. Um die Flex-Items entlang der Hauptachse zu positionieren, verwenden Sie die Eigenschaft justify-content. Sie kann die folgenden Werte annehmen:
- flex-start: linksbündige Anordnung auf der Hauptachse.
- flex-end: rechtsbündige Anordnung auf der Hauptachse.
- center: mittige Anordnung auf der Hauptachse.
- space-between: gleichmäßige Verteilung mit möglichem Abstand zwischen den Elementen auf der Hauptachse.
- space-around: gleichmäßige Verteilung mit möglichem Abstand zwischen den Elementen und zum Container auf der Hauptachse.
Möchten Sie die Elemente hingegen auf der Querachse anordnen, dann verwenden Sie die Eigenschaft align-content. Die Werte sind identisch zu justify-content, haben jedoch teilweise andere Auswirkungen:
- flex-start: Anordnung am Start auf der Querachse.
- flex-end: Anordnung am Ende auf der Querachse.
- center: mittige Anordnung auf der Querachse.
- space-between: gleichmäßige Verteilung mit möglichem Abstand zwischen den Elementen auf der Querachse.
- space-around: gleichmäßige Verteilung mit möglichem Abstand zwischen den Elementen und zum Container auf der Querachse.
Um einzelne Elemente auf der Querachse zu positionieren, steht eine weitere Eigenschaft zur Verfügung: Mit align-items können Sie beispielsweise dafür sorgen, dass Bilder auf der vertikalen Achse unterschiedlich ausgerichtet werden. Die Werte für align-items sind:
- stretch: gleichmäßige Verteilung; Defaultwert.
- flex-start: Elemente werden oben positioniert.
- flex-end: Elemente werden unten positioniert.
- center: Elemente werden in der Mitte positioniert.
- baseline: Elemente werden an der Grundlinie des parent-containers ausgerichtet.
Flexbox vs. Grid: Wo liegt der Unterschied?
Eine weitere Möglichkeit, Inhalte dynamisch darzustellen, bietet das CSS Grid-Layout. Sowohl Flexbox als auch Grid eignen sich sehr gut, um flexibles, responsives Design zu realisieren. Dennoch gibt es einen grundlegenden Unterschied zwischen den beiden Klassifizierungen.
Während Flexbox immer nur auf einer Achse arbeitet, können die Elemente im Grid-Layout in einem Rasterformat auf Spalten und Zeilen dargestellt werden. Das Grid-Layout ist somit im Gegensatz zur CSS Flexbox zweidimensional und bietet Grafikdesignern und -designerinnen noch mehr Möglichkeiten für mobiloptimierte Websites.
Fazit: Gestalten Sie mobiloptimierte, flexible Websites mit Flexbox
Wer die CSS-Grundlagen kennt, hat mit Flexbox vielfältige Möglichkeiten. Der Flexbox-Container bietet im CSS eine flexible Möglichkeit, Inhalte eines Webprojektes an die verschiedenen Bildschirmgrößen lokaler und mobiler Hardware anzupassen. Die Elemente innerhalb des Containers lassen sich entweder an der horizontalen Hauptachse oder der vertikalen Querachse ausrichten. Möchten Sie beide Achsen gleichzeitig verwenden, sollten Sie hingegen auf das Grid-Layout setzen.
Titelbild: Deagreez / iStock / Getty Images Plus
