Mehrspaltige Layouts werden seit einiger Zeit mittels floating von Elementen umgesetzt. Was einst gar nicht so gedacht war, hat sich als Rüstzeug für Frontend Entwickler etabliert. Eben jenes Floating bringt aber auch das ein oder andere Problem mit sich. Elternelemente, die die floatenden Container umschließen sollten, tun das nicht. Der Coder muss ein clearing einbauen, damit die semantische Logik auch im Browser sichtbar wird. Weitere Probleme gibt es wenn padding hinzukommt und Boxen breiter werden als gewünscht. Die Lösung all dieser Probleme heißt: Flexible Box Layout Module, kurz Flexbox.
Schauen wir uns eine Flexbox anhand eines dreispaltigen Layouts an:
1. HTML
<div class="wrap"> <div class="leftColumn"> </div> <div class="middleColumn"> </div> <div class="rightColumn"> </div> </div>
Denkbar einfach und klar strukturierter HTML-Code. Keine Helper-Klassen zum clearing von Containern. Häufiger Einsatz von floating kann den Code mit solchen Klassen schon mal aufblähen. Das bleibt uns beim Umsetzen mit Flexbox erspart.
2. CSS
.wrap {
border: 1px solid #000;
width: 400px;
height: 300px;
display: -webkit-box;
}.leftColumn {
background: blue;
-webkit-box-flex:2.0;
}.middleColumn {
background: red;
-webkit-box-flex:1.0;
}.rightColumn {
background: yellow;
-webkit-box-flex:1.0;
}3. Ergebnis
Fertig - Ein sauberes dreispaltiges Layout! Das zudem auch noch extrem flexibel ist. Schließlich heißt der CSS Entwurf nicht umsonst in seiner Kurzform Flexbox. Ändere ich die Breite von .wrap oder wird sie mittels Media Queries automatisiert beeinflusst, passen sich auch die darin enthaltenen Spalten automatisch an. Wie gemacht für plattformübergreifende, mobile Layouts - Stichwort Mobile First.
Ein weiteres Einsatzgebiet sind Grid-Layouts. Im Netz gibt es Unmengen von Frameworks und Toolkits die ein fertiges Grid-Layout, umgesetzt mit floating mitbringen. Mittels Flexbox kann aber auch jeder Frontendler sein eigenes Grid-System bauen, welches von Haus aus auch problemlos auf anderen Auflösungen läuft.
Zu den CSS-Eigenschaften von Flexbox:
box-align (start|end|center|baseline|stretch)
Anordnung einer Box. Durch 'center' könnt ihr zentrierte Layouts schaffen. Logischer und einfacher nachzuvollziehen als das klassische margin: 0 auto;
box-direction (normal|reverse|inherit)
Kehrt bei 'reverse' die Reihenfolge um. Gemäß obigem Beispiel, wäre die gelbe Box vorn, gefolgt von der roten und zuletzt der blauen.
box-flex (value)
Kernstück von Flexbox. Der Wert sagt aus, wie viel Raum eine Box in einer Flexbox einnehmen darf. In unserem Beispiel haben wir der blauen Box den Wert 2 gegeben. Daher auch die größere Breite. Die beiden kleineren Spalten haben jeweils den Faktor 1. Hätten alle den Wert 1, wären sie von gleicher Breite.
box-orient (horizontal|vertical|inline-axis|block-axis|inherit)
Mit 'vertical' könnt ihr die gesamte Flexbox - wer hätte es gedacht - vertikal ausrichten. Kann sicherlich mal interessant sein. Bspw. in Menüs.
box-pack (start|end|center|justify)
Ganz nützliche Eigenschaft um Kindelementen in einer Flexbox eine Positionierung mitzugeben, wenn die gesamte Box größer ist, als das Kindelement. Also wenn Platz übrig bleibt.
box-ordinal-group (value)
Bestimmt die Reihenfolge in einer Flexbox. Standardmäßig ist diese wie im HTML-Code. Es ist jedoch möglich, dass sich zur Laufzeit etwas ändert oder die Anordnung anders sein soll, als vom HTML vorgegeben. Dann kann ich ein Container zwischen beliebigen anderen Containern mittels box-ordinal-group einbauen. Hier gilt allerdings: Kleinere Werte wie 2 wiegen höher, als jene mit z. B. 8.
Browser-Support:
Chrome, Safari und Firefox beherrschen nahezu alle Flexbox-Eigenschaften. Bei Opera und IE müssen wir noch auf native Unterstützung warten.