CSS Flexbox

CSS Float und Clear CSS Flexbox-Ausrichtung

Flexbox ist ein modernes Layout-Modell in CSS, das eine flexible Anordnung von Elementen in einer Reihe oder Spalte ermöglicht. Es erleichtert die Handhabung von Ausrichtung, Größenänderung und Reihenfolge.

Was ist Flexbox?

Flexbox wird mit display: flex aktiviert. Innerhalb eines Flex-Containers ordnen sich die Elemente automatisch flexibel an, und zahlreiche Einstellungen stehen zur Ausrichtung und Verteilung zur Verfügung.

Eigenschaft	Beschreibung
display: flex	Erzeugt einen Flex-Container, in dem die Kindelemente flexibel angeordnet werden.
justify-content	Horizontale Ausrichtung, z. B. links, rechts, zentriert oder gleichmäßig verteilt.
align-items	Vertikale Ausrichtung innerhalb des Flex-Containers.
flex-direction	Legt die Richtung fest: Reihe (row) oder Spalte (column).

Grundlegendes Flexbox-Beispiel

Im folgenden Beispiel befinden sich drei Elemente in einem Flex-Container, die gleichmäßig verteilt und zentriert angezeigt werden.

Mit justify-content: space-around und align-items: center werden die Elemente gleichmäßig verteilt und vertikal zentriert.

Tipps zur Verwendung von Flexbox

Flexbox vereinfacht das Layout-Management, insbesondere bei dynamischem oder responsivem Design.

Verwende Flexbox, wenn du Reihen oder Spalten schnell anordnen musst.
Flexbox ist besonders nützlich für responsives Design, wenn sich Elemente an unterschiedliche Bildschirmgrößen anpassen müssen.
Kombiniere Flexbox mit Media Queries für noch flexiblere Layouts.