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.
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.
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%;}
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">
<!-- hier kommt der Inhalt hin -->
</div>
<div class="sued">
<p>Fußzeile</p>
</div>
</body>
Zum Schluss fügen wir dem inhalt
-Element drei weitere div
-Elemente west
, zentrum
und ost
hinzu.
<div class="inhalt">
<div class="west">
<!-- westliche Seitenleiste -->
</div>
<div class="zentrum"> <!-- hier kommt der Inhalt hin -->
</div>
<div class="ost">
<!-- oestliche Seitenleiste -->
</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.
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 )
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.
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.
A Complete Guide to Flexbox
SelfHTML: Flexibles Layout
w3schools: flexbox
Echoplex Flexbox Playground