CSS Flexbox – Crash Kurs

Werbung

Dieser Crash Kurs ist für absolute Flexbox Anfänger und soll nur einen schnellen Einblick in CSS Flexbox sein. Du musst vorher noch nichts von Flexbox gehört haben. Allerdings solltest du schon Erfahrung mit CSS haben.

Was ist Flexbox?

Bei Flexbox handelt es sich um einen CSS3 Layout Mode um Elemente besser und effektiv anzuordnen. Du brauchst keine Floats mehr.

Ich hasse Floats. Ich habe Floats schon immer gehasst. Ja, vielleicht weil ich das nicht komplett verstanden habe. Aber wer hat das schon?

Mit Flexbox lassen sich einfach responsive Layouts umsetzen. Später auch in Kombination mit CSS Grid.

Ein weiteres „Feature“ von Flexbox ist die Positionierung der Elemente ohne das HTML ändern zu müssen.

Flexbox Struktur

CSS Flexbox Struktur

Die Flexbox Struktur ist auf den ersten Blick gar nicht so einfach zu verstehen. Erst mit der Zeit und wenn man Flexbox auch einsetzt, wir die klar werden, dass es gar nicht so schwierig ist.

Nehmen wir mal folgenden Code an:

<div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>

Das Ergebnis im Browser sieht dann so aus:

Fangen wir mit dem äußeren Element an. Dem Flex Container. Das kann zum Beispiel ein div Element sein.

<div style=“display: flex“>

</div>

Als nächstes haben wir die Elemente, die in dem Flex Container leben. Die Flex Items.

<div style=“display: flex“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

Daraus wird im Browser:

Ganz normaler CSS Flex Container

Die Elemente werden in der Reihe angezeigt. Das geschieht der Default Anweisung flex-direction: row;

Wenn ich flex-direction auf column setze, dann werden die drei Flex Items wieder untereinander angezeigt.

<div style=“display: flex; flex-direction: column;“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

flex-direction: column;

Zusätzlich zu row und column gibt es auch noch row-reverse und column-reverse, welche die Elemente dann rückwärts anordnen. Hier habe ich dem Flex Container auch eine Höhe gegeben, damit man sieht was genau passiert

<div style=“display: flex; flex-direction: column-reverse; height: 300px;“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

flex-direction: column-reverse;

Hier hat sich jetzt nicht nur die Reihenfolge der Flex Items geändert. Auch Main Start und Main End sind vertauscht.

Gleiches gilt auch für row-reverse

Werbung

<div style=“display: flex; flex-direction: row-reverse;“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

flex-direction: row-reverse;

Also Main Start und Main Ende sind vertauscht. Aber was hat das mit column-reverse zu tun.

Beim ändern von flex-direction wird auch die Main Axis geändert.

Die Hauptachse (Main Axis) ist per default von links nach rechts, wenn flex-direction nicht angegeben wird. Also flex-direction ist quasi flex-direction: row.

Wenn ich flex-direction: column setze. Dann sieht die Flex Struktur so aus:

Am Anfang ist das etwas schwieriger zu verstehen und ich habe mich auch öfter mal gefragt: „Warum?“. Gerade wenn man anfängt die Flex Items zu positionieren mit justify-content oder align-items. Und trotzdem hat das alles seinen Sinn.

justify-content sorgt für die Ausrichtung auf der Main Axis und align-items sorgt für die Ausrichtung auf der Cross Axis. Immer. Also auch wenn die flex-direction geändert wurde.

Hier ein Beispiel

<div style=“display: flex; justify-content: center;“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

justify-content: center;

Hier wurden die Flex Items auf der Main Axis zentiert.

Jetzt machen wir das mal mit flex-direction: column

<div style=“display: flex; flex-direction: column; justify-content: center; height: 300px;“>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>

</div>

flex-direction: column; justify-content: center;

Das Gleiche passiert auch mit align-items.

align-items: center;
flex-direction: column; align-items: center;

Und jetzt beides zusammen

justify-content: center; align-items: center;

Jetzt gibt es eine Reihe weiteren Möglichkeiten um mit justify-content und align-items die Flex Items im Flex Container zu positionieren. Dazu schaust du am besten in der Mozilla Developer Doku oder beim Kulturbanausen nach.

Das hier sollte wirklich nur ein schneller Crash Kurs sein.