Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

CSS: Responsive Flexbox-Layouts für Profis

Einfache Navigation 2: Gestalten per Flexbox

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Navigationsliste wird mit display:flex zur Flexbox und die Flex-Items stehen nebeneinander und können einfach ausgerichtet werden. Die Eigenschaft flex ermöglicht den Flex-Items den zur Verfügung stehenden Platz auszufüllen.

Transkript

Ausgangspunkt für die erste Flexbox-Übung ist diese ungeordnete Liste, diese einfache Navigation: alle Punkte stehen untereinander. Im Editor ist "nav-single-level.html" und alle zugehörigen Stylesheets hier zu sehen und die sind in einen Übungs-Ordner kopiert worden. Springender Punkt ist hier die Navigation mit der Klasse "single-nav". Diese Navigation soll jetzt geflext werden. Dazu wechsle ich in stylesheet "nav-single-level" und da das erst ab einer gewissen "viewport"-Breite passieren soll, werde ich mit einer "media-query" beginnen: "@media screen and (min-with: -30em" für den Anfang. So, und jetzt kommt der Selektor "single-nav ul" das bekommt eine Anweisung, "display: flex" So, fertig, noch eine Klammer schließen und speichern das Ganze. Also, "single-nav ul" wird ausgewählt, das ist diese Liste und wird einfach mit einer Anweisung auf display: flex gesetzt. Gespeichert ist, rüber in den Browser - Trommelwirbel, und die Navigation ist fertig. Sie sehen hier die Standardeinstellungen für eine Flexbox sind so, dass man sie im Alltag wirklich gebrauchen kann. Linksbündig ausgerichtet, die Navigationspunkte stehen nebeneinander, die ganze Flexbox Box ist in sich geschlossen, hat keinerlei Auswirkungen auf folgende Elemente, man braucht also kein "clear" oder etwas Vergleichbares und "display inline", "inline block table", alles nicht mehr nötig, "display: flex", und fertig. Aber jetzt geht der Spaß eigentlich erst richtig los, denn man kann diese Flexbox, den Flexcontainer, wie wir das umgebende Element nennen, und die "flex-items", die einzelnen Listen-Elemente da drin auf sehr verschiedene Art und Weise gestalten. Zur Ausrichtung gibt es hier "justified content", der Standardwert hier ist "flex-start", den haben Sie in Aktion gesehen, linksbündig, "flex-end" ist dementsprechend rechtsbündig. Einmal rein damit, speichern und rüber, und neu laden und Sie sehen: rechtsbündig. Wenn Sie jetzt die Listen-Elemente gefloatet hätten, wären die in der falschen Reihenfolge, Kontakt wurde am Anfang stehen, und Start am Ende. Das ist alles mit Flexbox kein Problem. Ebensowenig wie das Zentrieren, "center, justify-content: center" also: ausrichten Inhalt, zentrieren, und schon ist das zentriert. Das wünschen sich Leute bei "float" seit vielen Jahren. Es gibt noch zwei Werte für "justify: center", die Dinge tun, die wir noch gar nicht kannten, nämlich "space-around" und "space-between". Ich beginne mal mit "space-around". Hier sehen Sie, dass die Elemente gleichmäßig verteilt werden und zwar der freie Platz wird gleichmäßig um die Elemente verteilt. Das fängt aber nicht ganz links an, das sieht man beim "hovern" sehr schön. Da ist freier Platz, und das wird hier so verteilt. Die andere Eigenschaft, "space-between", also zwischen den Elementen, macht das fast genauso, lässt aber beim ersten und beim letzten rechts beziehungsweise links den freien Platz weg. Also es fängt ganz links an, ganz rechts hört es auf, und in der Mitte wird der Platz frei verteilt, so eine Art Blocksatz hier. Beim "hovern" sieht man aber hier, dass zwischen den Elementen nicht anklickbarer Platz ist. Hier sieht man sehr schön, der Mauszeiger verändert sich. Jetzt können Sie in einer Flexbox den "flex-items", den Listenelementen in diesem Fall sagen, dass sie wachsen dürfen um den zur Verfügung stehenden Platz zu benutzen. Zurück in den Editor, und in diesem Falle sind die "flex-items "dran, also die Listenelemente: "nav li, {flex: 1 0 auto}" So, "flex" ist die Kurzform für "flex-grow", also wachsen erlaubt, shrinken nicht, shrink, "flex-shrink", shrinken heißt schrumpfen auf Deutsch und auto für flex-spaces bedeutet, dass die Breite die gewünschte Breite der "flex-items" sich am Inhalt oder irgendwelchen "width"-Angaben orientiert, die es im Augenblick aber nicht gibt. Gespeichert ist, rüber, in den Browser, neu laden, und Sie sehen: Jetzt sind die Elemente gleichmäßig verteilt, es ist kein nicht-anklickbar Platz mehr. Um jetzt den Text zu zentrieren, gibt es das gute alte "text-align: center" Speichern, rüber, und gleichmäßig verteilt. So, das war ein erster Eindruck von "display: flex" und was es ermöglicht.

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!