Denis Potschien 24. Juli 2012

CSS3: Nebeneinander liegende Elemente mit Flexbox statt Float

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:

<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:

div.flexbox {
  display: flexbox;
  flex-flow: row wrap;
}
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:

#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

Denis Potschien

Denis Potschien ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

5 Kommentare

  1. Ja Flexbox wäre schon ne coole Sache aber Eric Meyer hat erst vor kurzem gesagt dass Gecko in nächster Zeit Flexbox nicht implementiert (seines Wissens). Aber zum Glück gibts ja alternativem. Floats clearen, display:inline-block, display:table-cell, je nachdem was benötigt wird…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.