Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

CSS: Responsive Flexbox-Layouts für Profis

Responsive Card-Layouts 3: Breakpoints und Fein-Tuning

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Card-Layout wird um zwei Media Queries ergänzt, sodass das Layout je nach Viewport-Breite ein-, zwei- oder dreispaltig erscheint.

Transkript

Unser Karten-Grid sieht eigentlich schon recht gut aus, aber so ganz nebenbei bemerkt, haben wir eine der Grundregeln des modernen Webdesign gebrochen, denn was Sie hier machen, ist "desktop-first". Also schauen wir uns das Ganze jetzt einmal an hier im "mobile-first" und da sehen Sie, dass hier doch immer noch gilt, "flex: 0 1 cal(33% - 1em);" Wenn ich das rausnehme, sieht’s eigentlich besser aus, dann füllt die Karte den zu Verfügung stehenden Platz. "mobile-first" würde also bedeuten, wir fangen mit dem kleinsten Bildschirm an und vergrößern dann so langsam. Deswegen entfernen wir jetzt das Flexbox-CSS hier vom kleinen Bildschirm und fügen eine Media-Query ein. Also "@media screen and (min-width: 40em{" (Klammer zum öffnen) und hier unten kommt noch eine Klammer zum schließen "}" Jetzt gilt das CSS erst ab einer bestimmten Bildschirmbreite, rüber in den Browser, neu laden und es ist zu sehen, dass die Karte jetzt hier eindeutig die gesamte Breite ausfüllt. Das passt soweit sehr gut. Wenn man jetzt aber die Breite etwas erhöht hier, dann sieht man, das wächst wunderbar mit und jetzt gehen wir mal auf noch etwas breiter und da sehen Sie dann schon bei 716 -- ich mach’s noch etwas schmaler -- da ist es doch noch ein bisschen gepresst. Also, da hilft eigentlich nur eine zweite Media-Query und das bauen wir hier gleich mal ein. Dann kopiere ich mir den ganzen Krempel hier rüber, mach da eine Leerzeile rein und passe das Zweite an. Das kann gleich bleiben, das kommt also wieder raus. Was ich ändern möchte, ist zum einen die Breite, die kommt mal auf 60 und dann möchte ich hier oben bei dem etwas schmaleren, bei der mittleren Bildschirmbreite, das auf 50 setzen. 50%, also zwei Spalten und wenn es dann noch breiter wird, dann soll es dreispaltig werden. So, speichern, rüber in den Browser und neu laden und hier ist es jetzt zweispaltig, das sieht schon ganz gut aus. Wenn wir das jetzt vergrößern, am besten werden wir das hier mal zumachen, dann sieht es dreispaltig aus. Das ist also schon ganz gut, wenn wir das jetzt hier einmal im Überblick sehen. Ja, das ist ein bisschen sehr klein und wenn man es langsam hochzieht, dann sieht man zweispaltig und ganz zum Schluss hier dann dreispaltig. Jetzt ist nur noch ein bisschen Feintuning angesagt, denn wenn man hier beim zweispaltigen ist, dann könnte da hier in der Mitte, etwas weniger Platz dazwischen sein und auch der obere Abstand ist noch nicht ganz astrein. Dann probiere ich mal hier bei der zweispaltigen Geschichte, das auf 0.5 zu setzten und ändere auch gleich den 'margin-bottom' für die Karten, von 2 auf 1em und wo wir dann schon dabei sind, dann kommt hier für die "section" insgesamt oben der "margin" etwas weniger, das mache ich mit "margin-top: -1em;" und ganz unten können wir auch gleich noch nachbessern, hier bei "card", da kommt "margin-bottom: 2em;" bei den breiteren, damit das dann wieder so ist wie vorher. Hier haben wir das auf 1 zurückgesetzt, hier kommt es wieder hin und für die Cards insgesamt, will ich das noch eben nachbessern, "margin-top: inherit" (der soll so bleiben) und die Klammer ist geschlossen "}". Ein bisschen Feintuning hier mit den Margins für die einzelnen Elemente und einmal neu laden, so, ich mach’s hier mal etwas kleiner. Das ist also jetzt bei drei Spalten, dann zweispaltig wird das hier schon etwas passender und wenn wir ganz klein werden, dann haut es hier bei der einspaltigen Geschichte auch hin. So haben wir mit wenig Flexbox-CSS hier, ein responsives Layout und sind soweit fertig.

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...
 

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!