Eigenschaften Flexbox Items

Am Flex-Item stellst du ein, wie sich einzelne Kindelemente im Container verhalten – unabhängig von den Container-Eigenschaften. Die erste Eigenschaft dafür ist order.

order

Mit order legst du fest, in welcher Reihenfolge Flex-Items angezeigt werden. Standardmäßig ist der Wert 0. Items mit kleineren Werten erscheinen zuerst, Items mit größeren Werten danach.

Wichtig: Die HTML-Reihenfolge im Code bleibt gleich – nur die visuelle Anordnung ändert sich. Das ist hilfreich für Layouts, bei denen du die Reihenfolge per CSS anpassen willst, ohne das HTML umzubauen.

Die Grafik zeigt drei Beispiele:

• Gleiche Werte – Items mit demselben order-Wert behalten ihre ursprüngliche HTML-Reihenfolge (z. B. drei Items mit order: 1)
• Negative Werte – ein Item mit order: -1 rutscht nach vorne, noch vor alle Items mit 0 oder positiven Werten
• Vertikale Layouts – order funktioniert auch bei flex-direction: column

1<div class="container">
2    <div class="item a">A</div>
3    <div class="item b">B</div>
4    <div class="item c">C</div>
5</div>

1.item.a { order: 2; }
2.item.b { order: -1; }
3.item.c { order: 1; }

In diesem Beispiel erscheint B zuerst (order: -1), dann C (order: 1) und zuletzt A (order: 2) – obwohl im HTML A, B, C stehen.

flex-grow

Mit flex-grow legst du fest, ob und wie stark ein Flex-Item den freien Platz im Container einnimmt. Standardmäßig ist der Wert 0 – Items bleiben dann so breit wie ihr Inhalt und wachsen nicht.

Ein Wert größer als 0 bedeutet: Das Item darf wachsen. Der freie Platz wird proportional zu den flex-grow-Werten aller Items verteilt.

• Oben: alle Items mit flex-grow: 1 – der freie Platz wird gleichmäßig verteilt (Verhältnis 1:1:1)
• Unten: Werte 1, 2, 1 – das mittlere Item bekommt doppelt so viel Platz wie die äußeren (Verhältnis 1:2:1)

1.container {
2    display: flex;
3}
4
5.item { flex-grow: 1; }
6
7.item.middle { flex-grow: 2; }

flex-grow eignet sich besonders, wenn Items unterschiedlich breit werden sollen – zum Beispiel eine Sidebar mit fester Breite und ein Hauptinhalt, der den restlichen Platz einnimmt.

flex-shrink

Mit flex-shrink steuerst du, ob ein Item schrumpfen darf, wenn im Container nicht genug Platz ist. Standardmäßig ist der Wert 1 – Items werden dann kleiner, damit alles hineinpasst.

• 1 (Standard) – Item darf schrumpfen
• 0 – Item behält seine Größe und schrumpft nicht
• 2, 3, … – Item schrumpft stärker als Items mit niedrigeren Werten

1.container {
2    display: flex;
3    width: 300px;
4}
5
6.item { flex-shrink: 1; }
7
8.item.fixed {
9    flex-shrink: 0;
10    min-width: 150px;
11}

Mit flex-shrink: 0 bleibt ein Item bei wenig Platz in voller Größe – nützlich für Logos, Buttons oder Sidebars, die nicht zusammengedrückt werden sollen.

flex-basis

Mit flex-basis legst du die Ausgangsgröße eines Items fest, bevor freier Platz verteilt wird. Bei flex-direction: row entspricht das der Breite, bei column der Höhe.

• auto (Standard) – Größe richtet sich nach Inhalt oder width / height
• 200px, 50% usw. – feste oder relative Startgröße
• 0 – Item startet ohne eigene Basisgröße (häufig mit flex: 1)

1.item {
2    flex-basis: 200px;
3}
4
5.item.half {
6    flex-basis: 50%;
7}

flex-basis bestimmt also, wie groß ein Item zuerst ist – danach greifen flex-grow und flex-shrink.

flex

flex ist die Kurzform für flex-grow, flex-shrink und flex-basis in einer Zeile:

flex: grow shrink basis

• flex: 1 – entspricht 1 1 0%: Item wächst und schrumpft, Startgröße 0
• flex: auto – entspricht 1 1 auto: wächst und schrumpft, Startgröße nach Inhalt
• flex: none – entspricht 0 0 auto: weder wachsen noch schrumpfen
• flex: 0 0 250px – feste Breite, kein Wachsen, kein Schrumpfen

1.item {
2    flex: 1;
3}
4
5.sidebar {
6    flex: 0 0 250px;
7}
8
9.content {
10    flex: 1 1 auto;
11}

In der Praxis nutzt du flex am häufigsten – zum Beispiel flex: 1 für gleich breite Spalten oder flex: 0 0 250px für eine feste Sidebar.

align-self

Mit align-self richtest du ein einzelnes Flex-Item entlang der Querachse aus – und überschreibst damit die Container-Eigenschaft align-items nur für dieses Item.

In der Grafik haben alle Items oben durch align-items: flex-start dieselbe Ausrichtung – nur das dritte Item liegt unten, weil es align-self: flex-end hat:

Mögliche Werte (wie bei align-items):

• auto – übernimmt den Wert von align-items (Standard)
• flex-start – am Anfang der Querachse
• flex-end – am Ende der Querachse
• center – in der Mitte
• stretch – auf volle Höhe strecken
• baseline – an der Text-Baseline ausrichten

1.container {
2    display: flex;
3    align-items: flex-start;
4}
5
6.item.special {
7    align-self: flex-end;
8}

align-self ist praktisch, wenn fast alle Items gleich ausgerichtet sind, aber ein einzelnes Item anders stehen soll – zum Beispiel ein Button unten in einer Karte.