Responsive Flexbox-Layouts für Fortgeschrittene

Einfache Navigation 3: Zeilenumbruch erlauben

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine Flexbox ist von Haus aus auf eine Zeile beschränkt. flex-wrap erlaubt bei Platzmangel einen Zeilenumbruch, führt aber manchmal zu unerwarteten Effekten.

Transkript

Die Navigation sieht hier auf den ersten Blick schon recht gut aus, Beim "hovern" sieht hier alles gleichmäßig verteilt, alles anklickbar, und wenn ich mir das jetzt im Entwicklertool des Browsers hier anschaue, dann sieht man, für die Liste steht "display: flex" und "justify-content" und für die Listenelemente ist hier "flex: 1 0" autodefiniert. Dazu zwei Anmerkungen: Die Erste ist, dass dadurch das hier 'flex-grow' auf den Faktor 1 gesetzt worden ist, dürfen die 'flex items' wachsen. Das hat zu Folge, dass hier "justify-content" überhaupt keinerlei Auswirkung mehr hat. Wenn ich das jetzt hier anklicke und auf einen anderen Wert setzte, dann sehen Sie, da gibt es keinerlei Auswirkung, da der zur Verfügung stehende Platz ja bereits verteilt ist. 'justify-content' wirkt also nur, wenn 'flex-grow' nicht auf 1 steht, oder auf andere Werte, sondern nur wenn 'flex grow' ausgeschaltet ist. Die zweite Anmerkung ist, dass eine Flexbox von Haus aus einzeilig ist. Das heißt also, wenn jetzt der Platz kleiner wird, dann erfolgt nicht automatisch ein Umbruch. Dazu schalte ich hier oben mal die "Toggle device toolbar" ein, also die Device-Toolbar, ein Klick und Sie können jetzt hier entweder mit Klicks da oben im Chrome oder hier mit der Leiste stufenlos verkleinern. Das mache ich einmal und Sie sehen, das wird jetzt kleiner, das wird dann hier irgendwann umgeschaltet, wenn die 'media query' greift, aber es erfolgt vorher kein Umbruch. Den muss man extra erlauben und dazu gibt es eine Eigenschaft, die heißt 'flex-wrap', die werde ich hier gleich im... - Na, richtig schreiben muss man das schon - im Entwickler-Tool mal einbauen, "flex-wrap:wrap". So, der Standard ist "no wrap", wenn ich das jetzt verkleinere, dann erfolgt hier ein Umbruch. So weit, so gut. Aber man sieht beim Umbrechen hier schon, dass doch etwas manchmal unerwartete Effekte auftreten, denn die beiden umbrochenen Menüpunkte hier, die stehen nicht linksbündig unter den anderen. Das liegt daran, dass die Flexbox eindimensional ist. Sie ist also kein zweidimensionales Grid- oder Layoutraster, in der die Elemente dann automatisch bündig untereinander angeordnet werden, sondern, die Flexbox ist eindimensional, das bedeutet, dass für eine zweite Zeile, bei 'flex-wrap' hier, wieder neu berechnet wird. "justify-content: center" aber 'flex-grow' ist auf 1, also dürfen die Items in der zweiten Zeile, so groß werden, bis der zur Verfügung stehende Platz aufgebraucht ist. Das führt manchmal zu etwas seltsamen Effekten oder sagen wir mal zumindest, zu unerwarteten Effekten. Ich zeige das hier mal. Ich stelle jetzt mal "flex 1: auto" aus und hier "justify-content" auf "space-between", eine sehr beliebte Einstellung. "flex-wrap" steht auf "wrap", "space-between" hier und der Platz wird gleichmäßig verteilt, "flex-grow" ist im Augenblick nicht erlaubt. Wenn ich hier jetzt verkleinere, achten Sie darauf, was passiert, der sieht gut aus, der steht linksbündig und darf nicht wachsen, 'flex-grow' ist aus. Wenn jetzt zwei kommen, dann sehen Sie, einer links, einer rechts, weil "justify-content: space-between" aktiviert ist und das bedeutet auch für die zweite Zeile, die werden verteilt. Das ist Blocksatz, das ist so ähnlich wie bei Word, wenn Sie Blocksatz haben und dann einen Zeilenumbruch machen, dann werden die Worte manchmal etwas auseinander gezogen. Fazit ist also, dass man, wenn man 'flex-wrap' aktiviert und die automatische Platzverteilung nutzt... - automatische Platzverteilung heißt hier entweder 'space-between' oder 'space-around' für "justify-content" oder 'flex-grow' auf 1 setzt, so wie hier, dann gibt es manchmal etwas unerwartete Effekte dabei. 'flex-wrap' ist eine super Sache, wenn man hier das auf "flex-start" setzt, dann hat das auch genau den gewünschten Effekt, solange hier "flex" auch ausgesetzt ist. Dann fängt das links wieder an, so ähnlich wie man das vom 'floaten' gewöhnt ist. Also Fazit: Flexbox, wenn 'wrappen' erlaubt ist, also wenn der Zeilenumbruch erlaubt ist. Vorsicht mit der automatischen Platzverteilung von 'space-between', 'space-around' oder 'flex-grow'. So, ich schalte das hier alles mal wieder aus, gehe rüber in den Editor, aktiviere hier mal "flex-wrap", "flex wrap: wrap" und lasse das auf "space-between" und der steht auf "flex: 1 auto", das ist eine Kombination, die im Browser jetzt so aussieht und wenn jetzt das Browserfenster wieder verkleinert wird, dann sehen Sie hier, beim Umbruch wachsen die zweiten Punkte, aber das ist, wenn man es weiß, völlig in Ordnung.

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

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!