Flexible Boxen mit CSS

Für flexible CSS Boxen auf einer Webseite muss manje nach Situation ganz unterschiedlichen Layoutmitteln anwenden, mal über die Anordnung über float, mal mit den Möglichkeiten von display: table oder display: inline-block zuschlagen, und das Feintunen für die Anordnung einzelner Elemente erledigt man über position: relative in Kombination mit position: absolute. Was sich für welche Anordnung am besten eignet, hängt sehr von der konkreten Situation ab.
Das macht das Layouten mühsam und fehleranfällig.
Zudem sind mit dem Aufkommen des Responsive Webdesigns die Anforderungen an Layouts noch gestiegen, denn eine HTML-Basis
soll sich voll flexibel an die unterschiedlichsten Gegebenheiten anpassen. Einige Erleichterungen bietet da das neue Flexbox-Modul von
CSS3, das sich auch guter Browserunterstützung erfreut.
Wir sehen uns zuerst das Grundprinzip von Flexbox an und kommen dann zu Cross-Browser-Lösungen und Nachbesserungsmöglichkeiten in älteren Browsern.
Flexbox-Darstellung aktivieren Gehen wir einmal von einem umfassenden div-Element mit vier Absätzen aus:
<div class=”container”>
<p>Eins</p>
<p>Zwei</p>
<p>Drei</p>
<p>Vier</p>
</div>
Damit die Auswirkungen besser zu sehen sind, erhalten die Elemente unterschiedliche Hintergrundfarben, und außerdem bekommt das erste Element eine Mindesthöhe:
p:nth-child(1){
background-color: #1DA1CD;
min-height: 10em;
}
p:nth-child(2){
background-color: #68D286;
}
p:nth-child(3){
background-color: #36B453;
}
p:nth-child(4){
background-color: #EB585C;
}
Um die Flexbox-Darstellung zu aktivieren, müssen wir das umfassende Element zu einem Flexbox-Container machen. Das geht über die Angabe display: flex. Diese müssen Sie für Safari mit dem -webkit-Präfix doppeln.
Jetzt ist die Flexdarstellung aktiviert und bewirkt, dass die Elemente nebeneinander angezeigt werden. Außerdem sind die Elemente
gleich hoch – etwas, was bei der Verwendung von float ein bisschen Tüftelarbeit gewesen wäre.
Das Beispiel funktioniert in allen aktuellen Browsern.
Das Flexbox-Layoutmodul bringt seinen eigenen Jargon mit: Im Beispiel ist das umfassende div-Element der Flexcontainer, die darin befindlichen Absätze heißen Flexitems. Außerdem unterscheidet man bei Flexbox zwei Achsen: die Hauptachse und die Nebenachse. Im Beispiel ist die Hauptachse die horizontale, da die Elemente nebeneinander dargestellt werden. Die Achse, die quer zur Hauptachse verläuft, ist die Nebenachse; sie kommt bei manchen Anordnungen und Leerraumverteilungen zum Tragen.

Im letzten Beispiel wurden die Flexitems nebeneinander platziert. Das ist das Default-Verhalten, das Sie auch durch die Angabe flex-direction:
row aktivieren können:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Für eine Anordnung untereinander schreiben Sie hingegen flex-direction: column. Außerdem können Sie die Reihenfolge umkehren. Mit flexdirection:
row-reverse sind die Elemente horizontal angeordnet, aber das letzte kommt zuerst.
Dasselbe macht flex-direction: column-reverse für die Darstellung untereinander.
Mehrzeilige Anordnung Auch eine mehrzeilige Darstellung ist möglich.
Dafür brauchen wir etwas mehr Elemente – im Beispiel sind es nun acht Absätze, die außerdem eine Breite erhalten:
p {
width: 5em;
}
Jetzt können wir beim Container festlegen, dass die Elemente sich bei Bedarf auf mehrere Zeilen verteilen. Dazu dient die Angabe flex-wrap: wrap:

.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Damit werden je nach verfügbarem Platz unterschiedlich viele Elemente nebeneinander dargestellt.
Außerdem orientieren sich die Elemente in ihrer Höhe immer am höchsten Element der jeweiligen Zeile (Bild 1). Zu beachten ist allerdings, dass Firefox die Eigenschaft flex-wrap erst seit Version 28 unterstützt. Außerdem gibt es diese Eigenschaft nicht in der ersten Version der Spezifikation, was für Cross-Browser-Lösungen eine Einschränkung bedeutet.
Wenn die Elemente über flex-direction: row nebeneinander platziert sind, orientieren sich alle in ihrer Höhe an dem höchsten Element. Dieses Verhalten können Sie explizit beim Flexcontainer durch align-items: stretch vorgeben:

.container {
-webkit-align-items: stretch;
align-items: stretch;
}

Wenn Sie nicht möchten, dass alle Elemente gleich hoch werden, können Sie einen anderen Wert für align-items wählen (Bild 2):
■ align-items: flex-start: Die niedrigeren Elemente werden oben angeordnet.
■ align-items: center: Die niedrigeren Elemente werden in der Mitte angeordnet.
■ align-items: flex-end: Die niedrigeren Elemente werden unten angeordnet.

An diesem Beispiel zeigt sich auch sehr deutlich der Unterschied zwischen Hauptachse und Nebenachse. Im Beispiel sind die Elemente über flex-direction: row nebeneinander angeordnet.
Das bedeutet, dass die horizontale Achse die Hauptachse ist. Die Anordnung über align-items wirkt hingegen auf der Nebenachse – das heißt in der Vertikalen.
Genau umgekehrt wäre es, wenn Sie die Elemente über die Angabe flex-direction: column untereinander anzeigen lassen. Wenn diese unterschiedlich breit sind, können Sie die Anordnung der Elemente auf der horizontalen Achse – in diesem Fall die Nebenachse – mit align-items bestimmen.