Responsive Flexbox-Layouts für Fortgeschrittene

Floats und Probleme mit responsiven Card-Layouts

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Card-Layouts sind im Web sehr beliebt, aber bei der Umsetzung mit Floats gab es diverse Probleme. Diese gehören mit Flexbox glücklicherweise der Vergangenheit an.

Transkript

Cards - also auf Deutsch Karten oder oft auch Kacheln genannt, sind kleine Rechtecke, die Texte und Graphiken enthalten und sind seit einiger Zeit im Web ein Trend. Hier sieht man zum Beispiel solche Karten in Aktion und etwas weiter unten hier noch ein anderes Beispiel. Diese Karten bzw. Kacheln, wie sie im Deutschen oft genannt werden, weil "cards" im Deutschen eigentlich wörtlich übersetzt "Karten" heißt, aber das Wort Karten erinnert im Deutschen zu sehr an Landkarten - im Englischen gibt es da mit "Maps" ein extra Wort für - im Deutschen haben wir diese Unterscheidung nicht, deshalb werden sie meistens als Kacheln bezeichnet. Kacheln sind sehr beliebt, denn sie sehen gut und übersichtlich aus, sie sind auch auf Touchscreens einfach zu bedienen, wenn die ganze Karte ein Link ist. Kurzum; sie erlauben es uns, den Benutzern verschiedenste Informationshäppchen auf leicht verständliche Art zu servieren. Das Design ist einfach - die Umsetzung mit Preflex Box CSS war nicht immer ganz einfach. Sie sehen hier ein paar Kacheln, Cards, wie immer Sie sie nennen wollen und wenn ich jetzt etwas nach unten scrolle, dann sieht man schon das erste Problem hier: Die Karten sind nicht gleich hoch. Wenn also mehr Text drin ist, dann werden sie länger oder wenn mehr Bilder drin sind, denn bei "Floats" weiss das eine Element nicht, wie hoch das nächste Element ist - das geht nicht so einfach. Aus diesem Problem folgt nahtlos gleich das zweite, denn oft bleiben "Floats" aneinander hängen. Sie sehen, dass dadurch dass der hier etwas länger ist, kommt der hier reingefloated, bleibt an diesem hängen und glaubt er habe seinen Platz gefunden. Dass wir uns das eigentlich anders gedacht hatten, davon weiß diese Karte nichts-- hier unten geht's sogar einigermaßen. Mit Flexbox werden Sie eine Menge dieser Probleme auf einen Schlag lösen. Sie sehen hier: Erstens, Flex-Items sind gleich hoch. Das heißt also, in einer Zeile hier kennen die Karten die Höhe, die die anderen Karten haben und das geht in pro Zeile gleich hoch. Dass das pro Zeile ist, sieht man hier sehr deutlich etwas weiter unten, denn diese Karten sind wesentlich kürzer, da in dieser Zeile das hier die längste ist, aber es wird, wie gesagt, pro Zeile berechnet. Flexbox ermöglicht also Card-Layouts, Kacheln mit Bildern und Text und vermeidet dabei viele Probleme, die es mit Float-Layouts gegeben hat. Auch die Responsivität, also das Umbruchverhalten bei kleineren Bildschirmen, ist mit Flexbox relativ einfach zu regeln.

Responsive Flexbox-Layouts für Fortgeschrittene

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
Laufzeit:2 Std. 25 min (34 Videos)

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!