Responsive Flexbox-Layouts für Fortgeschrittene

Responsive Card-Layouts 2: Gestalten per Flexbox

29,95
Die Karten werden mit Flexbox-Eigenschaften gestaltet und in einem Grid-Layout arrangiert. Als überaus nützlich erweist sich dabei die CSS-Funktion calc().

Um die Karten als Grid-Layout, also in einem Raster darzustellen, soll jetzt mit Hilfe von Flexbox-Eigenschaften das CSS ein bisschen erweitert werden. Dazu erstmal zurück in den Editor hier, "card-layout" kurz anschauen. Flexbox basiert auf Eltern-Kind-Beziehung. In diesem Falle, wenn die Karten in einem Raster erscheinen sollen, dann wäre das umgebende Element der Flex-Container. Das ist also "section" mit der Klasse "cards" In "card-styles.css", wo die Basis-Formatierung für die Karten auch gespeichert ist, dort werde ich jetzt hier das Ganze um die Flexbox-Eigenschaften erweitern. Also der Selektor ganz einfach ".cards" und es geht los mit "display: flex". Dann kommt "justify-content: space-between" in diesem Fall und "flex-wrap" lasse ich erst einmal weg, weil ich Ihnen eben zeigen möchte, wie das ohne "flex-wrap" jetzt nur mit diesen beiden Zeilen hier im Browser aussieht. Und das ist vielleicht eine kleine Überraschung, denn Flexbox ist einzeilig, ohne "flex-wrap: wrap" ist Flexbox einzeilig, und presst alle sieben Karten hier in diese eine Zeile. Und die einzelnen Karten sind unterschiedlich breit. Da wir nichts gesagt haben, orientiert sich der Browser an dem Inhalt, an der Wortlänge, an der Bildgröße und dergleichen Dinge, und versucht das Beste daraus zu machen, was in diesem Falle nicht ganz mit dem übereinstimmt, was wir uns ursprünglich vorgestellt haben. Denn ein Grid ist das im Moment so noch nicht. Die Lösung besteht aus zwei Teilen. Zum einen müssen wir "flex-wrap: wrap" hinzufügen, das kennen sie bereits, und zum anderen müssen wir den Karten sagen, wir breit sie sein sollen. Aber eins nach dem anderen. Jetzt kommt erstmal "flex-wrap: wrap;" speichern - und kurz gucken, ob und was sich geändert hat. Das sieht aus wie ein "status quo ante", wie der Lateiner sagt, also, als ob wir gar nichts gemacht hätten. Hier sieht das fast genauso aus wie komplett ohne Flex, aber Sie sind nur noch einen Schritt von der Lösung entfernt, denn jetzt kommt die Geschichte mit der Breite für die einzelnen Karten. Noch mal kurz ins HTML zur Erinnerung, die Karten sind Artikel mit der Klasse "card", also ".card {" und jetzt kommt die Breitenangabe, und das machen wir auch mit Flex. Das würde auch mit "width" gehen, aber wo wir schon am Flexen sind, "flex: 0 1", "flex-grow" ist 0, also größer ist nicht erlaubt, größer als die gewünschte Größe, die gleich kommt. Kleiner ist erlaubt. "flex-shrink" steht auf 1 und jetzt kommt hier erstmal die "flex-basis", der dritte Wert, und da sage ich mal 33% und die [geschweifte] Klammer wieder zu. Ab in den Browser und schauen, was wir haben und Sie sehen, dass sieht doch schon besser aus als vorher. Wenn Sie nach unten scrollen, Sie sehen, die Flex-Items sind gleich hoch, die Höhe insgesamt wird pro Zeile bestimmt, genau wie wir das vorher gedacht hatten. Denn die zweite Zeile ist wesentlich kleiner, da weniger Text vorhanden ist. Und ganz unten steht einer linksbündig für sich alleine. "justify-content" steht auf "space-between", das heißt, das Ganze ist Blocksatz. Links geht es los, und rechts hört es auf und in der Mitte, der freie Platz, wird gleichmäßig verteilt. Wir haben dreimal 33%, also bleibt ein Prozent über. Gleichmäßig verteilt sind das hier zwei mal 0,5 Prozent. Um die Zwischenräume etwas besser kontrollieren zu können, gibt es eine Eigenschaft in CSS, die wir selten benutzten. Das ist "calc", die wird erstaunlich gut unterstützt, eigentlich. So, und jetzt sage ich mal dem Browser, kalkuliere das mal, "calc", nimm mal 33%, ziehe davon 1em ab, und den Rest gibst du den Karten, als gewünschte Ausgangsbreite. Wachsen dürften die Karten nicht, schrumpfen dürften sie. Das wird aber nicht nötig sein, denn hier sehen sie das Ergebnis. Das sieht doch schon ganz gut aus hier. Dadurch, dass "justify-content" auf "space-between" steht, wird der zur Verfügung stehende Platz automatisch verteilt. In der zweiten Zeile, die nicht so hoch ist wie die Erste, und in der Dritten ebenfalls. Dort steht links einer alleine. "space-between" mit "justify-content" scheint also eine adäquate Lösung zu sein und sieht im Moment gut aus.

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...
 
Einzeltraining: 29,95
: ab € 19,95
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!