CSS Flexbox-Ausrichtung
Die Ausrichtungsoptionen von Flexbox machen dieses Modell besonders leistungsfähig. Damit lässt sich steuern, wie die Elemente horizontal und vertikal im Container angeordnet werden.
Grundlagen der Ausrichtung
Flexbox bietet mehrere Einstellungen für die Ausrichtung: justify-content, align-items, align-self und align-content. Zusammen ermöglichen sie die vollständige Kontrolle über die Anordnung der Elemente.
| Eigenschaft | Beschreibung |
|---|---|
| justify-content | Horizontale Verteilung der Elemente entlang der Hauptachse. |
| align-items | Vertikale Ausrichtung der Elemente entlang der Querachse. |
| align-self | Ermöglicht einem bestimmten Element eine individuelle Ausrichtung. |
| align-content | Vertikale Ausrichtung bei mehrzeiligen Layouts. |
Praktisches Beispiel
Im folgenden Beispiel werden die Elemente horizontal zentriert und vertikal am unteren Rand ausgerichtet.
Mit justify-content: center und align-items: flex-end werden die Elemente horizontal zentriert und vertikal unten ausgerichtet.
Tipps zur Flexbox-Ausrichtung
Die Ausrichtungseigenschaften helfen, Elemente präzise zu platzieren und so responsive und flexible Layouts zu erstellen.
- justify-content und align-items werden oft zusammen verwendet, um ein harmonisches Layout zu erreichen.
- align-self erlaubt es, ein einzelnes Element anders auszurichten als die anderen.
- align-content wirkt nur, wenn der Flex-Container mehrere Zeilen enthält.
✨ 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.