CSS Flexbox Tutorial *WIP*

CSS Flexbox Tutorial *WIP*CSS Flexbox Tutorial *WIP*

Flexbox ist der moderne Weg eine Seite zu layouten. Anhand von Beispielen zeige ich dir, wie du dynamische Element-Größen erstellst. Die Idee hinter Flexbox ist das dynamische Ändern von Größen der Unterelemente, damit die beste Größe benutzt wird. Der Flex Container passt sich dem verfügbaren Platz an und vergrößert bzw. verkleinert die Unterelemente.

Ich zeige dir Anhand von Design, Produktübersicht und Gallery wie du mit Flexbox arbeiten kannst. Des weiteren erhälst du noch eine Übersicht aller Flexbox Eigenschaften und den Beschreibungen.

Übersicht

Basics

Flex setzt sich aus einem Container und den Elementen zusammen. Dabei ist zu beachten, dass der Flex-Container nur eine Ebene unter sich selbst wirksam ist. Wenn du ein Container hast, werden nur die direkten Unterelemente davon etwas mitbekommen, die Elemente die in den Elementen sind bekommen nichts von Flex mit.

CSS Flexbox Tutorial *WIP*

Produktübersicht Beispiel

In diesem Beispiel sollen 10 Produkte angezeigt werden. Die Kacheln sollen alle gleich Groß sein und den selben Abstand zwischen den Kacheln und dem Rand haben.

Schritt 1 - die HTML Struktur

Zuerst brauchen wir die HTML Struktur, die ein Container aufweist und 10 Produkt Kacheln.

Das sieht dann im Browser wie folgt aus: CSS Flexbox Tutorial *WIP*

Schritt 2 - CSS Magic

Jetzt stylen wir die Kacheln und den Container so, dass er nach einer ordentlichen Produktübersicht aussieht.

Nach dem übertragen der CSS Attribute sieht dann unsere Produktübersicht wie folgt aus: CSS Flexbox Tutorial *WIP*

Schritt 3 - leere Kacheln

Das ist aber noch nicht das Ergebnis das wir haben wollen, es sollen alle Kacheln gleich groß sein und sollen den gleichen Abstand zu einander haben. Dafür werden leere Kacheln benötigt, am besten so viele wie Kacheln selbst vorhanden sind, aber ich rechne immer mit 2000px / Kachelbreite (Flex Basis). Sprich unsere Kachelbasis ist 150px deswegen brauchen wir jetzt 2000/150 = 13,3 Kacheln... sicher ist sicher also lieber 14.

Jetzt müssen die leeren Kacheln noch unsichtbar werden.

CSS Flexbox Tutorial *WIP*
Demo öffnen

Eigenschaften

Display Flex

Definiert den Container als Flex

Alternativ kann auch flex-inline verwendet werden. Wenn es als Layout verwendet werden soll, nimmt man flex. Wenn es z.B. in einem Artikel oder Navigation verwendet wird, nimmt man flex-inline.

flex-direction

Mit flex-direction gibt man die Flußweise an, z.B bei row fließen die Elmente von links nach rechts, bei row-reverse von rechts nach links, bei column von oben nach unten und bei column-reverse von unten nach oben.

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-wrap

Flex Wrap gibt ann wie die Elemente umbrechen. Sprich bei nowrap werden alle Elemente in einer Zeile angezeigt und werden gequetscht. Bei wrap werden die Elemente umgebrochen, wenn sie die Breite erreicht haben fängt eine neue Zeile an. wrap-reverse macht das gleiche wie wrap, bloß die Elemente werden invertiert, sprich das letzte Element wird als erstes Angezeigt und die Zeilen werden von unten nach oben aufgefüllt.

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

CSS Flexbox Tutorial *WIP*

justify-content

Justify Content definiert den Platz zwischen den Elementen. Sprich es berechnet die dynamischen Abstände zwischen den Elementen wenn diese an der Hauptachse ausgerichtet sind.

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly


wallpaper-1019588
10 kleine Heckenpflanzen, die niedrig gehalten werden können
wallpaper-1019588
10 Pflanzen, die keine Erde benötigen und im Wasser wachsen
wallpaper-1019588
Der Garten im Februar: Was jetzt zu tun ist!
wallpaper-1019588
Bodenbeläge für Allergiker – welche sind geeignet?