CSS Flexbox Tutorial für Anfänger
Grundlagen, Beispiele und praktische Anwendung
Mit CSS Flexbox kannst du Layouts flexibel, modern und responsive gestalten. Du lernst hier, wie Elemente im Container angeordnet, ausgerichtet und mit Abstand versehen werden.
Grundstruktur von Flexbox
<div class="beispiel">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<style>
.beispiel {
display: flex;
}
</style>
Die wichtigsten Flexbox-Eigenschaften
| Eigenschaft | Mögliche Werte | Beschreibung |
|---|---|---|
display |
flex, inline-flex |
Aktiviert Flexbox im Container |
justify-content |
flex-start, center, space-between, space-around, space-evenly |
Richtet Elemente auf der Hauptachse aus |
align-items |
stretch, flex-start, center, flex-end |
Richtet Elemente auf der Querachse aus |
gap |
Pixel, z.B. 10px, 20px |
Bestimmt den Abstand zwischen Flex-Items |
flex-direction |
row, column, row-reverse, column-reverse |
Legt die Richtung der Anordnung fest |
flex-wrap |
nowrap, wrap, wrap-reverse |
Bestimmt, ob Elemente umbrechen dürfen |
Erklärungen zu ausgewählten Flexbox-Eigenschaften
justify-content
Mit justify-content steuerst du die Ausrichtung der Elemente entlang der Hauptachse.
<style>
.beispiel {
display: flex;
justify-content: space-between;
}
</style>
Beispiel: Die Items werden mit Abstand über die gesamte Breite verteilt.
align-items
Mit align-items richtest du die Elemente auf der Querachse aus.
<style>
.beispiel {
align-items: center;
height:150px;
}
</style>
Beispiel: Die Items werden vertikal mittig im Container ausgerichtet.
gap
gap sorgt für einen gleichmäßigen Abstand zwischen den Flex-Items.
<style>
.beispiel {
display: flex;
gap: 20px;
}
</style>
Beispiel: Zwischen den Items entsteht ein Abstand von 20 Pixeln.
flex-direction
Mit flex-direction bestimmst du, ob die Elemente horizontal oder vertikal angeordnet werden.
<style>
.beispiel {
display: flex;
flex-direction: column;
}
</style>
Beispiel: Die Items werden untereinander statt nebeneinander angezeigt.
flex-wrap
Mit flex-wrap legst du fest, ob Flex-Items in die nächste Zeile umbrechen dürfen.
<style>
.beispiel {
display: flex;
flex-wrap: wrap;
}
.beispiel div {
width: 200px;
}
</style>
Beispiel: Wenn nicht genug Platz vorhanden ist, rutschen die Items in die nächste Zeile.
Flexbox mittig zentrieren
<style>
.beispiel {
justify-content: center;
align-items: center;
height: 200px;
}
</style>
Beispiel: Die Items werden exakt in der Mitte des Containers ausgerichtet.
Tipps & Tricks
- Nutze
display: flex;für Container mit mehreren Elementen. - Verwende
gapstatt einzelner Margins für saubere Abstände. - Probiere
justify-contentundalign-itemsdirekt aus. - Flexbox eignet sich besonders gut für Header, Navigationen und Kartenlayouts.