Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Holy Grail 3: Sidebar nach links verschieben – Tutorial zu CSS

Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Gratismonat starten Für Ihr Team erwerben

Holy Grail 3: Sidebar nach links verschieben

“

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.

Inhalt