Einführung in das Flexbox-Modell von CSS

Vor dem Hintergrund flexibler Website-Layouts werden die Rufe nach Alternativen zu Floats & Co. immer lauter. Eine dieser Alternativen ist das sog. Flexbox-Modell von CSS, das vor dem Hintergrund „Content Choreography“ und „Responsive Webdesign“ bald sehr interessant werden dürfte. In diesem Beitrag möchte ich euch Flexbox kurz vorstellen und die grundlegende Funktionsweise erklären.

Warum ist Flexbox so spannend?

Im Responsive Design ist es wichtig, dass die verschiedenen Elemente einer Website flexibel gestaltet werden. Das Flexbox-Modell bietet dazu umfangreiche Möglichkeiten, von denen wir bisher nur träumen konnten. Ihr habt die Möglichkeit Elemente sowohl in der Höhe, als auch in der Breite nach unterschiedlichsten Verhältnissen flexibel zu gestalten. Boxen lassen sich nebeneinander in Zeilen, oder untereinander in Spalten anordnen, in der Reihenfolge beliebig positionieren und aneinander ausrichten (z.B. rechts unten).

Achtung, veraltete Syntax!

Wenn ihr euch mit dem Thema Flexbox beschäftigt, werdet ihr schnell merken, dass unterschiedliche Schreibweisen existieren. Dazu müsst ihr wissen, dass sich die Syntax in der Vergangenheit mehrfach verändert hat. Erfreulich ist allerdings, dass die Funktionsweise beibehalten wurde. Wenn ihr auf veraltete Quellen stoßt, könnt ihr den Code daher mit verhältnismäßig geringem Aufwand aktualisieren.

Immer wenn ihr den Befehl display: box;, die Eigenschaften box- oder den Befehl display: flexbox; seht, handelt es sich um veralteten Code! Die aktuelle Syntax lautet display:flex; bzw. die Eigenschaften beginnen mit flex-. Einen sehr detaillierten Artikel zu diesem Thema findet ihr auch auf CSS Tricks.

Flexbox-Grundlagen

Beginnen wir mit den wichtigsten Funktionen. Das Flexbox-Modell arbeitet mit verschiedenen neuen CSS-Eigenschaften, die sowohl auf ein umschließendes „Container“-Element, als auch auf enthaltene „Box“-Elemente angewendet werden müssen.

Zunächst muss mit display:flex; erst einmal die gewünschte Anzeigeart bestimmt werden. Diese Eigenschaft wird dem Container zugewiesen und wirkt sich auf die enthaltenen Elemente aus. Als nächstes müsst ihr festlegen, ob die Boxen nebeneinander (als Zeile) oder untereinander (als Spalte) angeordnet werden sollen. Dafür verwendet ihr die CSS-Eigenschaft flex-direction: row; bzw. flex-direction: column;. Beachtet bitte, dass die horizontale Ausrichtung (row) die Standardeigenschaft ist. Wenn ihr also nur display:flex; schreibt, ist die Ausrichtung der enthaltenen Boxen automatisch horizontal.

Nun muss definiert werden, wie sich die enthaltenen Boxen zueinander verhalten sollen. Dafür existiert u. a. die Eigenschaft flex: /* Zahlwert */;. Diese Eigenschaft bestimmt sozusagen die Flexibilität des Elements. Beachtet bitte, dass sich die Eigenschaft relativ verhält. Ein Element mit der Eigenschaft flex: 3; ist demnach drei mal so flexibel wie ein Element mit der Eigenschaft flex: 1;.

Flexbox-Beispiele

Ich möchte nun einige Beispiele konstruieren um die wichtigsten Eigenschaften von Flexbox anschaulich erklären zu können. Es werden allerdings nicht alle Funktionen behandelt, da das Flexbox-Modell sehr umfangreich ist. Eine detaillierte Erklärung der nicht behandelten Funktionen entnehmt ihr bitte der Spezifikation.

Beachtet bitte, dass die Beispiele zum Veröffentlichungszeitpunkt dieses Beitrags nur in Chrome funktionieren. Um eine weitreichendere Kompatibilität zu gewährleisten, muss neben der akuellen Flexbox-Syntax auch der mittelalte und ganz alte Code geschrieben werden. Zusätzlich erfordern die verschiedenen Browser individuelle Präfixe. Um die Beispiele übersichtlich zu halten, verwende ich daher nur die aktuelle Schreibweise, sowie die Vendor-Präfixe von Chrome.

Der HTML-Code der folgenden Beispiele ist identisch aufgebaut und sieht wie folgt aus.

<div id="container">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
    <div id="box4">Box 4</div>
</div>

Beispiel 1 – Floats vermeiden

Alle Boxen haben eine feste Breite zugewiesen bekommen und werden dank display: flex; nebeneinander dargestellt. Floats werden nicht verwendet und die Höhe der Boxen entspricht immer der Höhe des #container, unabhängig vom Inhalt.

Demo 1 anzeigen

#container {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
}

#box1 {
	background:red;
	width:250px;
}

#box2 {
	background:yellow;
	width:250px;
}

#box3 {
	background:green;
	width:250px;
}

#box4 {
	background:blue;
	width:250px;
}

Beispiel 2 – Flexible Spalte einfügen

Die gelbe Box (#box2) verfügt über keine feste Breite, alle anderen Boxen schon. Mit flex: 1; dehnt sich die gelbe Box immer auf die volle zur Verfügung stehende Breite aus, da sie als einziges Element flexibel ist.

Demo 2 anzeigen

#container {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
}

#box1 {
	background:red;
	width:150px;
}

#box2 {
	background:yellow;
	-webkit-flex:1;
	flex:1;
}

#box3 {
	background:green;
	width:150px;
}

#box4 {
	background:blue;
	width:150px;
}

Beispiel 3 – Zwei flexible Spalten

Die gelbe Box (#box2) und die grüne Box (#box3) verfügen über keine feste Breite, die beiden anderen Boxen schon. Mit flex: 1; streckt sich nun sowohl die gelbe als auch die grüne Box auf die volle zur Verfügung stehende Breite. Der Platz wird dabei unter beiden Boxen zu je 50% aufgeteilt, da sie gleich flexibel sind.

Demo 3 anzeigen

#container {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex
}

#box1 {
	background:red;
	width:150px;
}

#box2 {
	background:yellow;
	-webkit-flex: 1;
	flex: 1;
}

#box3 {
	background:green;
	-webkit-flex: 1;
	flex: 1;
}

#box4 {
	background:blue;
	width:150px;
}

Beispiel 4 – Zwei unterschiedlich flexible Spalten

Die gelbe Box (#box2) hat nun flex: 3; zugewiesen bekommen, die grüne Box (#box3)flex: 1;. Die beiden anderen Boxen haben nach wie vor eine feste Breite. Die gelbe und die grüne Box teilen den verfügbaren Platz nun untereinander mit einer Flexibilität von 3:1 auf.

Demo 4 anzeigen

#container {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
}

#box1 {
	background:red;
	width:150px;
}

#box2 {
	background:yellow;
	-webkit-flex: 3;
	flex: 3;
}

#box3 {
	background:green;
	-webkit-flex: 1;
	flex: 1;
}

#box4 {
	background:blue;
	width:150px;
}

Beispiel 5 – vertikale Ausrichtung als Spalte

In diesem Beispiel hat der #container mit flex-direction: column; die Anweisung erhalten, die enthaltenen Elemente vertikal von oben nach unten anzuordnen. Die gelbe und die grüne Box verhalten sich nach wie vor flexibel im Verhältnis von 3:1.

Demo 5 anzeigen

#container {
	width:100%;
	height:1000px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

#box1 {
	background:red;
	height:150px;
}

#box2 {
	background:yellow;
	-webkit-flex: 3;
	flex: 3;
}

#box3 {
	background:green;
	-webkit-flex: 1;
	flex: 1;
}

#box4 {
	background:blue;
	height:150px;
}

Beispiel 6 – Reihenfolge verändern

Alle Boxen teilen den Raum untereinander zu gleichen Teilen auf (flex: 1). Die Darstellung erfolgt als Zeile (row = Standardwert).
Um die Reihenfolge der Boxen umzukehren haben alle Boxen die Eigenschaft order: und einen entsprechenden Zahlwert von 1-4 erhalten.

Der Vollständigkeit halber sei erwähnt, dass ein identisches Ergebnis auch erreicht werden kann indem die Richtung der Hauptachse (im #container) mit flex-direction: row-reverse; von rechts nach links angegeben wird.

Demo 6 anzeigen

#container {
	width:100%;
	height:300px;
	background:#ccc;
	display:-webkit-flex;
	display:flex;
}

#box1 {
	background:red;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order:4;
	order:4;
}

#box2 {
	background:yellow;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order:3;
	order:3;
}

#box3 {
	background:green;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order:2;
	order:2;
}

#box4 {
	background:blue;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order:1;
	order:1;
}

Praxisbeispiel – Flexbox + Media Queries

Mit den nun kennengelernten Eigenschaften und einem Media Query lässt sich bereits ein kleines Praxisbeispiel erstellen. Die folgende Website ist so aufgebaut, dass in der Smartphone-Ansicht (und im HTML-Quellcode) die beiden Sidebars nach dem Hauptinhalt angezeigt werden. In der Desktop-Ansicht wird mit Hilfe von Flexbox der Hauptinhalt zwischen den Sidebars dargestellt. Wir erreichen so gleichzeitig die perfekte Darstellung und den semantisch sinnvollsten HTML-Code.

Demo anzeigen

<div id="container">
  <header id="header"> … </header>
  <nav id="nav-main"> … </nav>
  <div id="content">
    <article id="main"> … </article>
    <aside id="sidebar"> … </aside>
    <aside id="sidebar2"> … </aside>
  </div>
  <footer id="footer"> … </footer>
</div>

* {
	padding:0;
	margin:0;
}

body {
	background: #333;
	margin: 0;
}

#container {
	background: white;
	margin: 0 auto;
	padding: 15px;
	max-width:1200px;
}

#container * { padding: 15px; }

#header { background: #aa8147; }

#nav-main { background: #97a2aa; }

#content {padding:0;}

#main { background: white; }

#sidebar { background: #f0f3f5; }

#sidebar2 { background: #daedc1; }

#footer {
	background: #353535;
	color: white;
}

@media screen and (min-width:800px) {
	
	body {margin:20px;	}
	
	#content {
		display:-webkit-flex;
		display:flex;
	}
	
	#main {
		-webkit-flex:3;
		flex:3;	
		-webkit-order:2;
		order:2;
	}
	
	#sidebar {
		-webkit-flex:1;
		flex:1;	
		-webkit-order:1;
		order:1;
	}
	
	#sidebar2 {
		-webkit-flex:1;
		flex:1;
		-webkit-order:3;
		order:3;
	}
	
}

Praxisbeispiel – zweispaltige Layout mit Flexbox

Mehrspaltige Layouts werden üblicherweise mit Floats realisiert. Sofern ein Clearfix eingesetzt wird, funktionieren gefloatete Layouts in der Praxis sehr gut. Schwierig wird es allerdings, wenn ein mehrspaltiges Layout mit gleich hohen Spalten erzeugt werden soll. Mit Flexbox stellt das kein Problem dar.

<div class="container">
  <div>…</div>
  <div>…</div>
</div>

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background:lightblue;
  padding:10px;
}

.container > div {
  width: 50%;
  padding: 10px;
  background:white;
}

.container > div:first-child {
  margin-right: 10px;
}

Demo anzeigen

Kann Flexbox heute schon eingesetzt werden?

Im Moment rate ich noch davon ab, Flexbox für die Desktop-Ansicht einzusetzen, bzw. die Darstellung von Flexbox abhängig zu machen. Wie erwartet interpretiert der Internet Explorer die Eigenschaft nicht ausreichend. Selbst die modernen Browser Firefox und Safari haben noch einige Schwierigkeiten mit dem Modell.

Für die mobilen Browser könnte Flexbox bereits heute interessant sein. Hier dominieren der mobile Safari und Android den Markt. Diese beiden Browser verstehen die Eigenschaft, zumindest wenn auch die alten Schreibweisen verwendet werden. Allerdings muss auch bei Smartphones damit gerechnet werden, dass Benutzer den Opera-Browser verwenden, was dann auch hier zu Kompatibilitätsproblemen führen kann. Die HTML-Struktur der Website sollte daher unbedingt eine geeignete Fallback-Lösung darstellen und vom Aufbau her der Smartphone-Version ohne Flexbox-Kompatibilität entsprechen.

Eine Übersicht über den Browser-Support findet ihr auf Can I Use.

Tools und Hilfsmittel

Auf Best Web Design Tools findet ihr hilfreiche Tools zum Thema Flexbox.

Links / Quellen

• Flexbox First
• Mastering CSS Layout with Flexbox
• Using Flexbox – CSS Tricks
• Does Flexbox Have a Performance Problem? – CSS Tricks
• Don't use flexbox for overall page layout
• Advanced cross-browser flexbox
• Flexbox – intuio