Bei der Gestaltung mehrspaltiger Weblayouts ist der Einsatz der CSS-Float-Eigenschaft bisher meist unumgänglich. Gerade bei der Darstellung nebeneinander liegender Elemente wird sie eingesetzt und bringt gerne das ein oder andere Problem mit sich. Das CSS3-Flexbox-Modell bietet neue Möglichkeiten bei der Gestaltung nebeneinander liegender Elemente mit zusätzlichen Features und das ganz ohne Float-Probleme.

Zunächst muss erwähnt werden, dass sich das Flexbox-Modell noch in der Entwicklung befindet und sich schon der ein oder anderen Veränderung unterziehen musste. Beim Produktiveinsatz ist also noch Vorsicht geboten.

Flexible Boxen anordnen

Anders als beim Anordnen mit der Float-Eigenschaft, verlangt das Flexbox-Modell ein übergeordnetes Element, welches die Eigenschaften für die Anordnung der darin enthaltenen Kindelemente besitzt:

1
2
3
4
5

<div class="flexbox">
  <p>Box 1</p>
  <p>Box 2</p>
  <p>Box 3</p>
</div>

Die drei P-Elemente des eben gezeigten Beispiels sollen nun alle nebeneinander angeordnet werden. Dazu sind folgende Zeilen CSS nötig, die im Elternelement der drei Absätze definiert werden:

1
2
3
4

div.flexbox {
  display: flexbox;
  flex-flow: row wrap;
}

1
2
3
4

div.flexbox p {
  width: 100px;
  height: 100px;
}

Über die Eigenschaft „display“ wird das Element als Flexbox definiert. Die Eigenschaft „flex-flow“ gibt an, ob die Kindelemente nebeneinander („row“) oder untereinander („column“) angeordnet werden sollen. Der optionale Wert „wrap“ gibt an, dass die Kindelemente umgebrochen werden sollen, wenn der Platz des Elternelementes nicht ausreicht, um alles in einer Reihe unterbringen zu können. Ohne „wrap“ würden die Kindelemente grundsätzlich ohne Umbruch nebeneinander dargestellt werden.

Den P-Elementen weisen wir nun eine Höhe und Breite von jeweils 100 Pixel zu. Das folgende Bild zeigt, dass bei dem Flexbox-Modell die Float-Problematik nicht auftaucht:

Elemente per Flexbox angeordnet (oben) und per Float-Eigenschaft angeordnet (unten)

Flexible Breite für Boxen

Die Breite der Kindelemente richtet sich entweder nach deren Inhalt oder nach einer Breitenangabe, wie sie hier im Beispiel gemacht wurde. Alternativ besteht die Möglichkeit, einzelne oder alle Kindelemente so auszurichten, dass sie immer die gesamte Breite des Elternelementes ausfüllen:

1
2
3

#flexbox p:nth-child(1) {
  flex: auto;
}

Im Beispiel wird mit „:nth-child(1)“ das erste Kindelement per „flex“ auf automatische Breite gestellt. Das heißt, die Breite des ersten Kindelementes passt sich immer so an, dass alle drei Kindelemente die gesamte zur Verfügung stehende Breite einnehmen. Das zweite und dritte Kindelement wird jeweils mit der angegebenen Breite von 100 Pixel dargestellt.

Flexible Breite des ersten Elementes

Entwicklung des Flexbox-Modells

Wie anfangs bereits erwähnt, befindet sich das Flexbox-Modell noch in der Entwicklungsphase. Die hier vorgestellten Möglichkeiten spiegeln den aktuellen Stand wider und werden derzeit nur vom aktuellen Chrome unterstützt – mit entsprechendem Vendor-Prefix „-webkit-“. Und selbst dieser unterstützt noch nicht alle Features des Modells.

Ungeachtet dessen, stellt das Flexbox-Modell eine sinnvolle Alternative beziehungsweise Ergänzung zum bisherigen Float-Einsatz dar, zumal das Flexbox-Modell zusätzliche Möglichkeiten zum Anordnen und Ausrichten von Elementen vorsieht.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (155)