Positionierung mit Flexboxen

Flexboxen wurden entwickelt, um einfacher sog. responsive Layouts umsetzen zu können. Vorher kannte CSS nur Blockelemente (=erzeugt Umbruch), Inline-Elemente (=kein Umbruch), Tabellen (=2-dimensional), sowie explizit positionierte und damit aus dem Elementfluss herausgenommene Elemente.

Mit Flexboxen wird, wie der Name schon andeutet, die flexible Positionierung erheblich vereinfacht. Hierfür wird ein Container-Element benötigt, welches dann die zu positionierenden Elemente enthält.

Das Grundprinzip: Ein Container wird zum Flex-Container, seine direkten Kinder werden automatisch zu Flex-Items.

/* ── FLEX CONTAINER ───────────────────────────── */
.container {
    display: flex;                   /* aktiviert Flexbox */
    flex-direction: row;            /* row | column | row-reverse | column-reverse */
    justify-content: space-between; /* Hauptachse: flex-start | center | space-around */
    align-items: center;           /* Querachse:  flex-start | flex-end | stretch */
    flex-wrap: wrap;               /* Items umbrechen wenn kein Platz */
}

/* ── FLEX ITEMS ───────────────────────────────── */
.item {
    flex: 1 1 auto;               /* grow  shrink  basis */
    /* flex: 0 0 100px → fixe Breite, wächst/schrumpft nicht */
    /* flex: 1 1 auto  → nimmt verfügbaren Platz anteilig ein */
}
.item:last-child {
    flex: 5 5 auto;               /* erhält 5× mehr Platz als flex: 1 Items */
    align-self: flex-end;          /* einzelnes Item abweichend ausrichten */
}

1. Beispiel: einfach nur flex

Ein umschließendes div mit der Eigenschaft display: flex.

Box eins
Box zwei
Box drei
Box vier

2. Beispiel: flex-direction

Ein umschließendes div mit den Eigenschaften display: flex und flex-direction: row-reverse;.
Achtung: Im Quellcode sind die inneren divs in der Reihenfolge eins, zwei, drei notiert!

Box eins
Box zwei
Box drei

Ein umschließendes div mit den Eigenschaften display: flex und flex-direction: column-reverse;.
Achtung: Im Quellcode sind die inneren divs in der Reihenfolge eins, zwei, drei notiert!

Box eins
Box zwei
Box drei

Mögliche Werte sind

3. Beispiel: justify-content

Ein umschließendes div mit den Eigenschaften display: flex und justify-content: center;.

Box eins
Box zwei
Box drei

Mögliche Werte sind

4. Beispiel: align-items & align-self

Ein umschließendes div mit den Eigenschaften display: flex und align-items: stretch;.

Box eins
Box zwei
Box drei

Ein umschließendes div mit den Eigenschaften display: flex und align-items: flex-end;.

Box eins
Box zwei
Box drei

Ein umschließendes div mit den Eigenschaften display: flex und align-items: center;.

Box eins
Box zwei
Box drei

Ein umschließendes div mit den Eigenschaften display: flex, Box 1 mit Eigenschaft align-self: center;, Box 2 mit Eigenschaft align-self: flex-end; und Box 2 mit Eigenschaft align-self: stretch;, wichtig für Box 3: die Höhe der inneren Boxen muss auf height: auto; stehen.

Box eins
Box zwei
Box drei

Mögliche Werte für align-items und align-self sind

Übung zur Vertiefung

Theorie ist schön und gut, nichts geht über praktische Anwendung, deswegen bitte hier entlang.
Oder wer statt Enten lieber mit Fröschen üben möchte, hier entlang ;-)