CSS Flexbox
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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.