CSS: Responsive Flexbox-Layouts für Profis

Holy Grail 3: Sidebar nach links verschieben

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit wenigen CSS-Anweisungen wird die Sidebar mit der Eigenschaft "order" nach links verschoben.

Transkript

Das Holy-Grail-Layout steht soweit und jetzt möchte ich Ihnen zeigen, wie man ganz einfach per Flexbox die Sidebar auf die andere Seite bekommen kann. Dazu schauen wir uns im Editor hier das HTML einmal an. "<div class="content"" ist ein "Wrapper" um "<main class="main-area"" und "<aside class="sidebar"" drumherum. Dieser Wrapper "<div class="content"" ist im CSS hier in "holy-grail.css" eine Flexbox geworden. "display: flex;" ist also eine Flexbox, Flex-Container, und gleichzeitig auch ein Flex-Item. Der erste Versuch und in diesem Falle führt das sogar zum Erfolg, würde einfach darin bestehen, die "flex-direction" umzudrehen; statt "row" sagt man "row-reverse" und im Browser sieht man nach einem Neuladen, dass die Sidebar tatsächlich auf der anderen Seite sitzt. Also die Flex-Richtung ist jetzt einfach umgedreht und bei zwei Elementen passt das gut, aber wenn wir jetzt ein dreispaltiges Layout hätten, dann ist man damit nicht sehr flexibel, also man kann einfach nur die Flussrichtung umdrehen, man kann aber nicht genau bestimmen, welches Element jetzt an welcher Stelle stehen soll, denn dazu gibt es eine andere Eigenschaft, die heißt "order". Jedes Flex-Item hat die Standardeinstellung "order: 0;", das entspricht dann der Reihenfolge im HTML-Quelltext. Wenn man jetzt aber bestimmten Flex-Items, wie hier z. B. "main-area" sagt: "Du bist jetzt Order 1." und dann nimmt man die Sidebar unten drunter und der sagt man: "Du bist jetzt Order 2.", dann sieht das im Browser so aus, dass das wieder andersrum steht, also "order: 1;" für "main-area", "order: 2;" für die Sidebar. Und da kann man natürlich hier jetzt aus der 2 eine 0 machen, 0 kommt vor 1, also müsste die Sidebar jetzt wieder vor dem Inhaltsbereich kommen und demzufolge links stehen; quod erat demonstrandum. Was zu beweisen war und es passt hier ganz gut. So kann man mit diesen Ziffern hier die genaue Reihenfolge bestimmen. Was aber noch einfacher ist und zukunftssicherer ist, dass ich hier bei "main-area" das "order" einfach weglasse, je weniger man ändert, desto einfacher und desto flexibler wird das und bei "sidebar" setze ich jetzt eine -1 hin. Wenn bei "main-area" kein "order" auftaucht, dann ist das "order: 0;". Negative Zahlen sind erlaubt, wenn ich jetzt bei der Sidebar "order: -1;" setze, dann kommt -1 vor der 0 und es sollte sich hier nach einem Neuladen nichts ändern. Auch das hat geklappt. Damit sehen Sie, dass Sie hier mit ein, zwei CSS-Anweisungen innerhalb einer Flexbox die Reihenfolge sehr einfach definieren können.

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