CSS Flexbox Tutorial für Anfänger.

CSS Flexbox ist ein modernes Layout-Modell, mit dem du Elemente innerhalb eines Containers flexibel anordnen kannst. Es eignet sich besonders gut, wenn du Inhalte sauber nebeneinander, untereinander oder mittig platzieren möchtest. Flexbox hilft dir dabei, Layouts einfacher und übersichtlicher zu bauen als mit vielen alten CSS-Techniken. Vor allem bei Navigationen, Kartenlayouts, Header-Bereichen und Buttons wird Flexbox sehr oft eingesetzt. Der große Vorteil ist, dass du Inhalte mit wenigen CSS-Regeln sehr kontrolliert ausrichten kannst.

Flexbox ist immer dann sinnvoll, wenn du Elemente in einer Reihe oder Spalte flexibel anordnen möchtest. Besonders praktisch ist es, wenn du Inhalte gleichmäßig verteilen, vertikal zentrieren oder mit Abständen versehen willst. Typische Anwendungsfälle sind zum Beispiel Navigationsleisten, Button-Gruppen, Kartenlayouts oder Bereiche mit Text und Bild. Für einfache und flexible Layouts ist Flexbox oft die beste Wahl.

Mit display: flex; verwandelst du ein normales Element in einen Flex-Container. Alle direkten Kind-Elemente werden dann automatisch zu Flex-Items und lassen sich mit Flexbox-Eigenschaften steuern. Das bedeutet: Die Elemente verhalten sich nicht mehr wie normale Block-Elemente, sondern können gezielt auf der Hauptachse und Querachse ausgerichtet werden. Ohne display: flex; funktionieren die anderen Flexbox-Eigenschaften nicht.

justify-content bestimmt die Ausrichtung der Flex-Items auf der Hauptachse. Wenn der Container horizontal angeordnet ist, steuert diese Eigenschaft also, wie die Elemente von links nach rechts verteilt werden. Du kannst damit zum Beispiel Inhalte links ausrichten, mittig platzieren oder mit gleichmäßigen Abständen über die gesamte Breite verteilen. Besonders häufig werden die Werte center, space-between und space-around verwendet.

align-items richtet die Flex-Items auf der Querachse aus. Bei einer horizontalen Anordnung bedeutet das meist die vertikale Ausrichtung der Elemente innerhalb des Containers. Mit dieser Eigenschaft kannst du Inhalte oben, mittig oder unten ausrichten. Sehr häufig wird align-items: center; genutzt, um Elemente optisch sauber in der Mitte zu positionieren.

Mit flex-direction bestimmst du, in welche Richtung die Flex-Items angeordnet werden. Standardmäßig liegen sie nebeneinander in einer Zeile, also mit row. Wenn du column verwendest, werden die Elemente untereinander dargestellt. Das ist besonders nützlich, wenn du auf kleineren Bildschirmen oder für bestimmte Layouts eine vertikale Anordnung brauchst.

Mit gap legst du den Abstand zwischen den Flex-Items fest. Das ist eine sehr saubere und moderne Methode, weil du nicht jedes einzelne Element mit Margins versehen musst. Gerade bei mehreren Boxen oder Karten sorgt gap für ein gleichmäßiges und übersichtliches Layout. Dadurch bleibt dein CSS leichter lesbar und später einfacher anzupassen.

flex-wrap legt fest, ob Flex-Items in die nächste Zeile umbrechen dürfen, wenn nicht genug Platz vorhanden ist. Standardmäßig bleiben sie in einer Zeile, was bei schmalen Bildschirmen schnell zu Problemen führen kann. Mit flex-wrap: wrap; kannst du verhindern, dass Inhalte überlaufen. Das ist besonders wichtig für responsive Layouts, damit deine Boxen auf kleineren Geräten sauber umbrechen und trotzdem gut lesbar bleiben.

Flexbox ordnet Elemente in einer Richtung an – entweder in einer Zeile oder in einer Spalte. CSS Grid arbeitet zweidimensional und steuert Zeilen und Spalten gleichzeitig. In der Praxis nutzt man Flexbox meist für Komponenten wie Navigationen oder Button-Gruppen und CSS Grid für das Seitenlayout. Beide lassen sich problemlos kombinieren.