CSS 3 Flexbox Beispiele

1. Ausrichtung

1.1 div { display: block }

Startpunkt für die Beispiele ist ein einfaches Seiten-Layout, welches der Übersichtlichkeit halber mit unterschiedlichen Rahmen und Farben versehen ist. In diesem ersten Beispiel noch ohne Flexbox.

Das div dient als Container für die drei Elemente des Layouts: (Navigation, Inhalt, Weiteres)

1.2 div { display: flex }

Eine Flexbox ist ein Element (in diesen Beispielen div) mit der CSS-Eigenschaft display:flex. Die Elemente einer Flexbox werden per Vorgabe in einer Reihe (engl. row) angeordnet.

Und dasselbe nochmal mit width:40ex

1.3 div { display: block }

Wenn man die Elemente im div-Element als Inline-Blöcke definiert erhält man ein oberflächlich identisches Ergebnis.

Der Unterschied wird erst sichtbar, wenn die Breite des Containers nicht ausreicht.

1.4 div { … ; flex-direction: column }

Fügt man zu Beispiel 1.2 in zusätzliches flex-direction:column sorgt für ein zu Beispiel 1.1 identisches Ergebnis. row ist der Vorgabewert für flex-direction.

4. div {…; justify-content: center }

4. b) div {…; flex-direction:column;  justify-content: center ; height:12em}

5. div {…; justify-content: space-around }

6. div { justify-content: space-between }

7. div { justify-content: space-between }

7. div { justify-content: space-between }