Was ist CSS Flexbox?

CSS Flexbox ist ein Layoutmodell, mit dem Elemente in einer Zeile oder Spalte angeordnet, ausgerichtet und im verfügbaren Raum verteilt werden. Es ist vor allem für eindimensionale Layouts gedacht: Die Gestaltung orientiert sich an einer Hauptachse und einer dazu senkrechten Querachse. Für professionelles Webdesign erleichtert Flexbox die konsistente Ausrichtung responsiver Komponenten über verschiedene Bildschirmgrößen hinweg.

Flex-Container und Flex-Items

1. Container erzeugen:
   – display:flex oder display:inline-flex – macht ein Element zum Flex‑Container.
   – Direkte Kindelemente werden automatisch zu Flex‑Items.
2. Hauptachse steuern:
   – flex-direction – legt die Richtung der Hauptachse fest (horizontal oder vertikal).
   – justify-content – verteilt die Flex‑Items entlang dieser Hauptachse.
3. Querachse steuern:
   – align-items – richtet alle Flex‑Items auf der Querachse aus.
   – align-self – überschreibt die Ausrichtung für ein einzelnes Flex‑Item.

Größe und Verteilung

Mit flex-grow können Items freien Platz aufnehmen, flex-shrink erlaubt das Verkleinern bei Platzmangel und flex-basis definiert die Ausgangsgröße. Die Kurzschreibweise flex kombiniert diese Werte. gap erzeugt gleichmäßige Abstände, ohne jedem Element eigene Außenabstände geben zu müssen. Das konkrete Ergebnis hängt auch von Mindestgrößen und Inhalt ab.

Umbruch und responsive Layouts

Standardmäßig bleiben Flex-Items in einer Linie und können schrumpfen. flex-wrap erlaubt den Umbruch auf weitere Zeilen oder Spalten. Zusammen mit flexiblen Breiten, min-width und Media Queries eignet sich Flexbox für Navigationen, Formulargruppen, Kartenreihen und Komponenten, die sich an unterschiedliche Viewports anpassen.

Flexbox oder CSS Grid?

Flexbox steuert primär eine Dimension und eignet sich gut, wenn Inhalt und verfügbare Fläche die Anordnung bestimmen. 

CSS Grid plant Zeilen und Spalten gleichzeitig und ist daher oft besser für zweidimensionale Seitenraster.

Beide Verfahren können kombiniert werden: Grid strukturiert beispielsweise die Seite, Flexbox richtet Inhalte innerhalb einer Komponente aus.

Barrierefreiheit und typische Fehler

Visuelle vs. logische Reihenfolge:

• order oder umgekehrte Flussrichtung können die visuelle Reihenfolge verändern.
• Die HTML‑Reihenfolge (DOM) bleibt jedoch gleich → Fokus‑ und Lesereihenfolge können dadurch fehlerhaft sein.
• Inhalte sollten deshalb im DOM logisch angeordnet sein.

Layout‑Probleme bei Texten:

• Feste Höhen können Texte abschneiden, wenn Schriftgrößen wachsen.
• Unbedachte Shrink‑Regeln führen zu Problemen bei Übersetzungen oder längeren Texten.