Flexbox in CSS & HTML (Tutorial) – responsive Layouts entwickeln

Das erwartet dich in dem Kurs zu Flexbox in CSS und HTML.

Was ist Flexbox-Layout und warum sollte man es überhaupt verwenden?

Hier wird das Projekt aufgesetzt, in dem dann im Weiteren gearbeitet wird.

Ich stelle hier die Beispielstruktur und die in VS-Code integrierten Debug-Möglichkeiten mit den MS Edge-Tools vor. Außerdem wird in diesem Video das erste Mal das Flexbox-Layout aktiviert und die Richtung eingestellt.

Wie lässt sich der Platz gleichmäßig bzw. in bestimmten Verhältnissen im Flexbox-Layout aufteilen?

Eine kleine Übung, bei der man um ein wenig (einfache) Mathematik nicht herumkommt.

Hier stelle ich ein horizontales Layout mit zwei Seitenleisten vor, das sich responsiv an die Breite anpasst.

Kindelemente können vom Flex-Container entlang der Querachse ausgerichtet werden. Hier zeige ich, wie dies eingestellt werden kann.

Nicht nur beim Container kann man die Ausrichtung aller Kindelemente einstellen, mit align-self lässt sich das auch bei den Einzelelementen unterschiedlich justieren.

Eine kleine Übung zur Einzelausrichtung mit einem Würfel.

Nicht nur entlang der Querachse lässt sich in einem Flex-Container ausrichten, es lässt sich auch entlang der Hauptachse einiges an der Ausrichtung ausrichten. ;-)

Ein kleines Beispiel, wie man das Ausrichten entlang der Hauptachse für ein häufiges Layout sehr gut einsetzen kann.

Wer flexibel sein will, muss auch die Größe der Kindelemente unabhängig von der konkreten Breite oder Höhe angeben können. Zum Glück gibt es das flex-basis-Property, womit man genau dies erreichen kann. Ändert man die flex-direction, wird so aus einer Breite eine Höhe und umgekehrt. 

Um wie viel soll ein Element wachsen, wenn mehr Platz vorhanden ist, als die flex-basis vorgibt? Dies lässt sich mit flex-grow gezielt einstellen.

Um wie viel soll ein Element schrumpfen, wenn weniger Platz vorhanden ist, als die flex-basis vorgibt? Dies lässt sich mit flex-shrink gezielt einstellen. 

Kindelemente können nicht nur schrumpfen, wenn weniger Platz vorhanden ist, sondern auch vom Container umgebrochen werden. Wie man dies mit flex-wrap kontrolliert, zeige ich in diesem Video.

flex-direction und flex-wrap lassen sich kombiniert in der Eigenschaft flex-flow angeben. Das macht sogar Sinn, wenn man nur flex-direction setzen will, da flex-flow kürzer ist. ;-)

Eine Aufgabe zu flex-wrap.

Abstand muss manchmal sein, um es dem menschlichen Auge nicht unnötig zu ungemütlich zu machen. Zum Glück gibt es mit gap eine CSS-Eigenschaft, die genau dies bei den Kindelementen eines Flex-Containers bewerkstelligt.

Ordnung muss sein, besonders bei Web-Oberflächen, denn diese sollen ja gut bedienbar sein. Die Reihenfolge muss manchmal auch individuell festgelegt werden, ohne Elemente im DOM zu bewegen. Dafür ist die CSS-Eigenschaft order sehr gut geeignet, mit der man die sichtbare Reihenfolge der Elemente einfach ändern kann.

Testen wir mal, ob ihr das mit der Reihenfolge verstanden habt. Hier gibt es sogar eine zweite Möglichkeit, das gleiche Resultat zu erzielen, aber darauf kommt ihr sicherlich auch.

Es kommt sehr oft vor, dass man Elemente und vor allem Text horizontal und vertikal (!) zentrieren möchte. Was vor Flexbox ein Krampf war, ist mit Flexbox ein Kindergeburtstag.

Wer kennt ihn nicht, den 3-Spalter? Wenn sich dieser noch an den verfügbaren Platz anpasst, fehlt nicht mehr viel zum responsiven Design.

Gibt es Webseiten ohne Formulare? Wenn ja, dann sind es nicht viele. Deswegen ist es sehr wichtig, dass man diese ansprechend anordnet, was zum Glück mit Flexbox kein Problem ist.

Sehr oft hat man es mit verschachtelten Layouts zu tun, aber mit Flex-Layout sind auch solche keine große Herausforderung mehr.

Mittlerweile gibt es Web-Chat-Clients wie Sand am Meer und mit den KI-Chatbots sind noch weitere hinzugekommen. Wie aber kann man einen Chat mit Flexbox realisieren? Das zeige ich in diesem Video.

Spätestens seit Web 2.0 findet man auf fast jeder Webseite eine Galerie. In diesem Video beschreibe ich, wie ein solches Layout beispielsweise wunderbar mit Flexbox umgesetzt werden kann.

Nun sollte alles klar sein, was das Flex-Layout angeht. Zum Schluss beschreibe ich, was ihr gelernt haben solltet, was ihr noch machen könnt und was es noch für schöne CSS-Layout-Möglichkeiten gibt.