Definition: Flexbox
Was bedeutet: Flexbox
Flexbox (Flexible Box Layout) ist ein eindimensionales Layout-Modell für CSS. Es wurde entwickelt, um Elemente innerhalb eines Containers auch dann effizient anzuordnen, auszurichten und zu verteilen, wenn deren Größe unbekannt oder dynamisch ist.
Die Definition von Flexbox beschreibt ein System, das sich auf die Verteilung von Elementen entlang einer Hauptachse (horizontal oder vertikal) konzentriert. Im Gegensatz zum herkömmlichen Layout-Modell ermöglicht Flexbox es den Elementen, ihre Breite oder Höhe “flexibel” anzupassen, um den verfügbaren Platz im Container optimal auszufüllen oder eben nicht zu überschreiten.
Es ist das ideale Werkzeug für Komponenten, die sich flüssig anpassen müssen – wie Navigationsleisten, Kartenelemente oder Zentrierungsaufgaben. Flexbox löst eines der ältesten Probleme im Webdesign: das einfache vertikale Zentrieren von Inhalten. Da es nur in eine Richtung arbeitet (entweder Zeile oder Spalte), ist es weniger komplex als CSS Grid, aber unverzichtbar für die Mikro-Anordnung auf einer Website.
FAQ - Häufig gestellten Fragen zum Begriff: Flexbox
Wann nutze ich Flexbox und wann CSS Grid?
Die Faustregel lautet: Flexbox für den Inhalt (eindimensional, z. B. Buttons in einer Leiste), CSS Grid für das Layout (zweidimensional, z. B. die gesamte Seitenstruktur). Flexbox ist perfekt, wenn die Größe der Elemente bestimmt, wie sie angeordnet werden. Grid ist perfekt, wenn das Layout bestimmt, wo die Elemente landen sollen.
Was bedeutet "Flex-Wrap"?
Das ist eine der nützlichsten Funktionen. Mit flex-wrap: wrap sagen wir dem Container: „Wenn kein Platz mehr in der Zeile ist, schiebe die restlichen Elemente einfach in die nächste Zeile.“ Das ist die Basis für viele responsive Designs ohne komplizierte Berechnungen.
Kann Flexbox Elemente auch vertikal zentrieren?
Ja, das ist die Paradedisziplin! Mit nur zwei Befehlen (justify-content: center für die horizontale und align-items: center für die vertikale Achse) lässt sich ein Element perfekt in der Mitte seines Containers platzieren – egal wie groß dieser ist.
Warum heißt es "eindimensional"?
Weil Flexbox Elemente immer nur entlang einer Linie anordnet. Man entscheidet sich für die flex-direction: Entweder row (nebeneinander) oder column (untereinander). Man kann nicht beides gleichzeitig kontrollieren, wie es bei CSS Grid möglich ist.