CSS: Responsive Flexbox-Layouts für Profis

Responsive Layouts per Flexbox - die Beispielseiten

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das "CSS Flexible Boxes Layout Module", kurz Flexbox genannt, ermöglicht neue Layouts für Komponenten auf Webseiten – oder auch ganze Seiten. Dieser Film deutet kurz an, wohin die Reise in diesem Training geht.

Transkript

Wenn dies Ihre erste Begegnung mit dem CSS Flexible Box Layout Module ist, wie die Flexbox mit vollem Namen heißt, dann ganz kurz eine Minianleitung, denn es geht hierbei um einen neuen Wert für die CSS-Eigenschaft "Display", "Display Flex", und diese Eigenschaft, dieser neue Wert ermöglicht neue Layouts für Komponenten von Seiten oder auch für ganze Seiten, auch wenn er in erster Linie für Komponenten gedacht ist. Die Grundidee dabei ist, dass ein umgebendes Element "Display Flex" bekommt und die Kind-Elemente dadurch flexibel werden und sich dem zur Verfügung stehenden Platz automatisch anpassen. Sie stehen von Haus aus nebeneinander, haben die gleiche Höhe, können je nach Bedarf wachsen oder schrumpfen oder auch auf eine neue Zeile umbrechen. In diesem Training geht es in erster Linie um die Anwendung von Flexbox und Grundlagen werden vorausgesetzt oder nur kurz am Rande erwähnt. Wenn Sie einen Grundkurs zu Flexbox brauchen, dann werfen Sie mal einen Blick auf mein Training "Layouten per Flexbox" aus der "Little Boxes"-Reihe, in dem alle grundlegenden Flexbox-Eigenschaften und Werte, sowie deren Einsatz an praktischen Beispielen erläutert werden. In diesem Training geht es los mit Navigationen: Sie bauen verschiedene Navigationen; einfache, etwas erweitert mit Icons, dann mit Dropdown und einer Social-Media-Leiste und zum Schluss eine Kombination aus dem Dropdown-Menü und der Leiste in einer Navigation. Dann geht es weiter mit Karten-Layouts - hier mit einem grid-basierten Karten-Layout, das hier in einem Raster arrangiert wird. Alles responsive natürlich. Ein Holy Grail mit einem Footer, der auch unten bleibt, wenn die Seiten ganz wenig Inhalt haben. Und zum Schluss werden all diese Demos zusammengebaut in einer Seite mit Navigation, Dropdown und Sie können die Sidebar tauschen und ausblenden und Sie sehen, dass sich der Inhalt hier flexibel anpasst und man kann die Sidebar natürlich auch wieder einblenden. Am Ende steht also ein recht fortschrittliches Layout, das auf CSS3, Flexbox und einer Brise JavaScript basiert. Jetzt wissen Sie, wohin die Reise geht, also nichts wie los!

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!