Webseiten bändigen mit Flexbox

17. Oktober 2016

Mit dem flexbox-Layout lassen sich mit geringem Aufwand wie der Name vermuten läßt sehr flexibel Gestaltungen von Webseiten herstellen. Dieser Beitrag beschreibt, wie sich das flexbox-Modell für die Herstellung eines klassischen Anwendungslayouts nutzen läßt.

Anwendungsbeispiel

Unser Beispiel besteht aus einer Kopf- und Fußzeile sowie zwei Seitenleisten die sich rund um einen zentralen Inhaltsbereich gruppieren. Die Beispielansicht zeigt den grundsätzlichen Ansatz: Ein Bereich wird als Element angelegt, dessen Inhalt entlang einer Spalte senkrecht fließt. Darin eingebettet ein weiterer Bereich, dessen Elemente entlang einer Zeile waagerecht aneinandergereiht sind.

Nachfolgend ist Schritt für Schritt beschrieben, wie mit nur wenigen Zeilen HTML und CSS eine Seitenvorlage entsteht, mit der eine Vielzahl von Anwendungsszenarien abgedeckt werden kann.

Höhe festlegen

Damit alle Elemente stets den gesamten im Fenster zur Verfügung stehenden Raum einnehmen wird für die Elemente html und body die CSS-Eigenschaft height auf 100% gesetzt.

html, body {height:100%;}

Aufteilung in Nord, Inhalt und Süd

Als nächstes wird der verfügbare Raum von oben nach unten in Kopfzeile, Zentrum und Fußzeile unterteilt. Hierfür wird zunächst als CSS für das body-Element

display: flex;
flex-flow: column;

angegeben. Anschließend werden innerhalb des body-Elements div-Elemente mit den Klassen nord, sued und inhalt deklariert. nord und sued haben keine Höhenangabe und wachsen mit ihrem Inhalt. Das Wachsen kann man auch abstellen und im Stylesheet eine feste Höhe notieren. Das Element inhalt erhält height: 100% und füllt den gesamten übrigen Raum abhängig von der Höhe des Fensters.

<body>
<div class="nord">
    <p>Kopfzeile</p>
</div>
<div class="inhalt">
    
</div>
<div class="sued">
    <p>Fußzeile</p>
</div>
</body>

Zentrum mit Seitenleisten

Zum Schluss fügen wir dem inhalt-Element drei weitere div-Elemente west, zentrum und ost hinzu.

<div class="inhalt"> <div class="west">  </div> <div class="zentrum">
 </div> <div class="ost">  </div>
</div>

Für inhalt wird ebenfalls ein flexbox-Verhalten deklariert, dieses Mal waagerecht orientiert entlang einer Zeile.

display: flex;
flex-flow: row;

Auf diese Weise werden die Elemente west, zentrum und ost nebeneinander innerhalb von inhalt angeordnet und nehmen mit height: 100% jeweils die gesamte verbleibende Höhe ein. Durch width: 100% nimmt zentrum dabei allen Raum ein und verwendet zudem mit overflow: auto einen Rollbalken für Inhalte, die über diesen Raum hinaus gehen.

Fehler in Firefox

Sobald man overflow: auto für den Inhalt im Zentrum wählt, wird neben dem Rollbalken für den Inhalt im Zentrum auch am rechten Rand des Browserfensters ein Rollbalken gezeigt. Dieser scheint die Höhe aus Kopf- und Fußzeile zu umfassen. Das Verhalten ist im Internet-Explorer nicht so.

Eine Umgehung für diesen Fehler: Im Element, das das Element im Zentrum enthält, wird min-heigt: 0; notiert. (Quelle: Stackoverflow )

Besonderheit in Safari (Apple OSX und iOS)

Das Rollen funktioniert auf iPhone und iPad nur flüssig, wenn im CSS zusätzlich zu overflow: auto im Element zentrum auch -webkit-overflow-scrolling: touch; notiert wird.

Fazit

Die Demonstrationsseite zeigt alle beschriebenen Elemente im Zusammenspiel und belegt, dass sich dank flexbox-Layout eine Internetseite mit wenigen Handgriffen dynamisch an eine Vielzahl von Nutzungsmöglichkeiten anpasst. flexbox ist für eine große Zahl verschiedener Anwendungsszenarien geeignet, von denen dieser Beitrag nur eines heraus greift.

Mit flexbox kann dieselbe Seite geräteunabhängig gestaltet werden, gleichzeitig sinkt der Aufwand zur Anpassung an verschiedene Szenarien.

Ressourcen zu Flexbox

A Complete Guide to Flexbox
SelfHTML: Flexibles Layout
w3schools: flexbox
Echoplex Flexbox Playground