CSS: Responsive Flexbox-Layouts für Profis

Holy Grail 2: Layout gestalten per Flexbox

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der äußere Wrapper und der Wrapper um den Inhalt werden zur Flexbox. Inhaltsbereich und Sidebar werden per Flexbox nebeneinander gestellt und sind daher automatisch gleich hoch.

Transkript

Dieses einspaltige Basislayout hier mit allen Layoutbereichen untereinander, dass auf schmalen Bildschirmen gar nicht so schlecht aussieht, das soll verwandelt werden in einen Holy Grail mit durchgehendem Header, Main Area und Sidebar nebeneinander und durchgehendem Footer dadrunter. Die beiden Inhaltsspalten sollen gleich hoch sein und hier links noch ein bisschen Platz, so dass der Inhalt nicht über die gesamte Breite läuft. Das ist die Ausgangsposition. Es geht rüber in den Editor, in der entsprechenden CSS-Datei "holy-grail.css" Da beginne ich unterhalb der Basisgestaltung und füge ich hier die Flexbox-Geschichte ein. Los geht es mit einer "media query": "@media screen" und wie bisher immer in den Beispielen soll das loslegen bei 40em, also etwa 640 Pixel, je nachdem. So. Und dazwischen geht es los und als erstes bekommt der Container, der ganz um die Seite herumgeht, also um alle drei Hauptlayoutbereiche - Header, Inhalt und Footer - das "div" mit der Klasse "outer-wrap" Das bekommt hier schlicht und einfach "display: flex;" wird also damit zu Flexbox. Speichern und, wenn Sie Flexbox nicht das erste Mal benutzen, dann wissen Sie, dass die Standardeinstellung ist, dass alle Flex-Items nebeneinander stehen. Das sieht dann sehr interessant aus. Der Header links, der Inhaltsbereich in der Mitte, der Footer rechts und unten drunter die Sidebar. Tja, vielleicht kommt es irgendwann in Mode, aber es ist nicht das, was uns eigentlich vorschwebte. Deswegen wird hier im Editor für diese Flexbox die "flex-direction" gleich auf "column" gesetzt. So... "flex-direction: column" und rüber und jetzt sieht es noch nicht so fantastisch aus, aber immerhin genauso wie vorher. Also, Footer unten, Sidebar unten, optisch hat sich nichts geändert, aber der Wrapper ist jetzt eine Flexbox. Jetzt kommt der Inhaltsbereich, der ist in dem "div" mit der Klasse "content" und dort wird noch einen Flex-Container gebaut. Also wir verschachteln die hier, "display: flex;" So... und speichern... rüber. So, und jetzt sollten hier Inhaltsbereich und Sidebar nebeneinander stehen. Nur es ist noch nicht so ganz optimal. Das ist ein bisschen sehr breit. Das ist ein bisschen sehr schmal. Also gebe ich dem Inhaltsbereich, genau genommen der Sidebar, die haben wir mal hier etwas weiter unten... Das ist "side" mit der Klasse "sidebar". Das bekommt eine feste Breite. Also "flex: 0 0 12em;" So sieht das aus. Das entspricht einer festen Breite mit "width". Und ich gehe auch rüber in den Browser und lade die Seite neu und jetzt ist das hier eine tatsächlich feste Breite. Wenn ich jetzt ins DevTool gehe, hier ins Entwicklertool, dann sieht man, dass wenn ich das etwas breiter mach hier... So... Da kommt es schon, dann sehen Sie, das ist wirklich eine feste Breite. Die passt sich nicht an, egal, wie breit das Browserfenster ist. So weit, so gut. Jetzt muss noch der Inhaltsbereich etwas angepasst werden. Also man kann die Sidebar natürlich flexibel gestalten. Das ist eine Designentscheidung, die ich hier getroffen habe, aber ich mag das für dieses Beispiel mit der festen Sidebar ganz gerne. So jetzt kommt als erstes, dass der Inhalt hier im Inhaltsbereich etwas eingeschränkt wird. Der liegt in einem "article" mit der Klasse "post-content". Die spreche ich jetzt an: "post-content" und dem hätte ich gerne erstens eine maximale Breite gegeben: "max-width: 40em", damit er nicht über die volle Breite geht und zweitens möchte ich ihn innerhalb des Bereiches zentrieren mit dem ganz normalen "margin: auto"-Trick. So, "max-width: 40em", "post-content", rüber in den Browser, neu laden und gucken, wie es aussieht hier. Nicht ganz wie erwartet. Das sind 40em auf dem ersten Blick, hier sind 12 daneben, aber hier ist jetzt Platz frei. Das heisst, wir müssen jetzt der Main Area, in dem der "article" liegt, sagen, das sie wachsen darf. Als Flex-Item ist das überhaupt kein Problem. Also, ".main-area" Das ist das Main-Element: ".main-area" und "flex:" Wachsen erlaubt, Schrumpfen erlaubt und Ausgangsgröße soll automatisch bestimmt werden. So, diese Kombi gibt es im herkömmlichen CSS nicht. Das ist die Flexibilität. Dadurch passt sich der Inhaltsbereich komplett an. So, einmal neu laden und Sie sehen, hier wächst der Inhaltbereich solange, bis Platz ist. Die 12em stehen rechts am Rand, weil der wird rübergedrückt hier und die 40em sind innerhalb dieses Bereiches zentriert, so dass wir jetzt ein wirklich brauchbares Layout haben.

CSS: Responsive Flexbox-Layouts für Profis

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!