Dieser Artikel soll eine Einführung in das Layout-Modul Flexbox geben, welches eine Alternative zu den in die Jahre gekommenen Floats darstellt.
Da das Thema eine gewisse Komplexität aufweist, unterteilen wir den Artikel in kleinere Häppchen.
In den alten Zeiten wurde mit Tabellen gelayoutet – Webseiten wurden in Zellen aufgeteilt und entsprechend mit Hintergrundgrafiken und Zellenausrichtung gespickt. Obwohl diese Methode ihre Vorzüge hatte, sprangen damals immer mehr Entwickler auf CSS-Floats über.
Diese hatten unter anderem den Vorteil, dass Content und Design sauber voneinander getrennt wurden, was zu qualitativ besserem Code führte und sich positiv auf Suchmaschinen Indizierung (SEO) auswirkte. Erst durch die strikte Trennung wird das Responsive Webdesign, wie wir es heute kennen, möglich. Jedoch haben CSS Floats immer noch ihre Schwächen und manche Layouts lassen sich nur sehr umständlich, oder mit entsprechenden Hacks umsetzen.
CSS Flex eröffnet uns Entwicklern die Möglichkeit, Elemente flexibel (daher der Name) in einem Container zu platzieren. Dabei bleiben die Elemente skalierbar und verhalten sich je nach Bildschirmgröße / Device-Ratio entsprechend den Anforderungen, um zum Beispiel verfügbaren Whitespace auszufüllen, oder Overflows zu vermeiden.
Die Absicht hinter Flex zielt in erster Linie auf Applikations-Komponenten, oder auch Module einer Webseite. An dieser Stelle möchte ich auch das neuere CSS Grid Modell erwähnen, welches in Naher Zukunft Layouten noch einfacher und flexibler macht. Die Vorzüge und Unterschiede von CSS Grid und CSS Flex werden wir in einem gesondertem Artikel beleuchten.
Nun aber zur Praxis:
Flexbox erweitert die CSS display Property um den Wert: flex. Dadurch werden alle Kind-Elemente ähnlich dem normalen Textfluss-Verhalten nebeneinander dargestellt.
Beispiel A
Im folgenden Codeblock habe ich als Container eine <section>, als untergeordnete Elemente <article> verwendet. Der Container wird in flex auch als flex-container bezeichnet, die Kind-Elemente als flex-items.
Definieren wir nun die flex-grow Eigenschaft der Artikel, werden sich diese die verfügbare Fensterbreite gleichmäßig teilen.
<section class="grid">
<article>1/3</article>
<article>1/3</article>
<article>1/3</article>
</section>
<section class="grid">
<article class="flex-grow-1"> 1/3 </article>
<article class="flex-grow-1"> 1/3 </article>
<article class="flex-grow-1"> 1/3 </article>
</section>
.grid {
display: flex;
}
.flex-grow-1 {
flex-grow: 1;
}See the Pen CSS Flexbox simplifiziert – Part 1a (@iCymiCy) on CodePen.
Beispiel B
Diese dynamische Breitenvergabe der Artikel lässt sich weiter über die Eigenschaft flex-grow regeln, indem wir hier einen abweichenden Wert von zB 2 angeben. So wird dieser Artikel doppelt soviel Platz beanspruchen, wie seine Brüder. Höhere Werte, sowie Fließkommazahlen sind hier natürlich auch möglich.
<section class="grid">
<article>1/4</article>
<article class="u-flex-grow-2">2/4</article>
<article>1/4</article>
</section>.grid {
display: flex;
}
.u-flex-grow-2 {
flex-grow: 2;
}See the Pen CSS Flexbox simplifiziert – Part 1b by Jan Benda (@iCymiCy) on CodePen.
Beispiel C
Die Reihenfolge der Artikel ist natürlich erstmal über das Markup vorgegeben, jedoch keinesfalls Fix. Wir haben sowohl über den Container, als auch über die Artikel die Möglichkeit die Reihenfolge, bzw. Ausrichtung zu verändern. Dies ist besonders im Bereich des Responsive Webdesigns sinnvoll. So könnte sich die Reihenfolge der Flex-Items für Mobilgeräte zum Beispiel ändern.
Die Ausrichtung lässt sich über die Eigenschaft flex-direction steuern. Auf den Container angewandt beeinflusst sie die Schreibrichtung der Elemente:
von links nach rechts row
von rechts nach links row-reverse
von oben nach unten column
von unten nach oben column-reverse
<section class="grid">
<article>Artikel 1</article>
<article>Artikel 2</article>
<article>Artikel 3</article>
</section>Im folgenden Beispiel habe ich die flex-direction auf column-reverse gesetzt, daher werden die Artikel von unten nach oben ausgegeben.
.grid {
display: flex;
flex-direction: column-reverse;
}See the Pen CSS Flexbox simplifiziert – Part 1c by Jan Benda (@iCymiCy) on CodePen.
Im nächsten Teil unseres Workshops sehen wir uns an, wie sich mit Hilfe von Flexbox ein Website Layout realisieren lässt.
Stay tuned!