Publisher 3 · 2020

Erscheinungsdatum · 2020

Lizenzen

Dieser Text ist von Stefan Huber unter der Lizenz CC-BY-SA 4.0 veröffentlicht. Publisher erhält das Recht die Inhalte ohne Copyleft (Share Alike) zu publizieren.

Bilder für Print (pdf)

Flexbox – ausrichten von Elementen im Web

Rückschau

Die erste Veröffentlichung von Cascading Style Sheets (CSS) im Jahr 1996 hatte bereits eine sehr gute Grundlage geschaffen, um Texte zu formatieren und die Struktur vom Inhalt auch visuell zu unterscheiden. Wollte man jedoch ein reiches Layout mit komplexen Strukturen erstellen, war dies meist schwieriger zu erreichen. Insbesondere weckte die seit der iPhone-Einführung 2007 stetig wachsende Bedeutung von Mobilgeräten das Bedürfnis, auch flexible Layouts für verschiedene Screengrössen adaptieren zu können. Erst seit Herbst 2018 gibt es nun eine Spezifikation über das so genannte Flexible Box Layout Module (kurz Flexbox). Obwohl dieser Standard streng gesehen noch nicht abgeschlossen ist, wird er schon von allen modernen Browsern unterstützt. Das bereits 2017 eingeführten Grid Layout Module (kurz CSS-Grids) wurde wesentlich zögerlicher implementiert. Es steht also nichts im Weg, Flexbox zu verwenden.

Anwendungsbereich

Auch wenn Flexbox den Anschein erweckt, dass man damit zweidimensionale Layouts erstellen kann, handelt es sich streng genommen doch eher um eine Methode zur Positionierung von Elementen in horizontalen oder vertikalen Schichtungen. Man kann zwar horizontal oder vertikal gewisse Ausrichtungen steuern, für wirklich freie zweidimensionale Aufteilungen muss man aber CSS-Grids verwenden. Dennoch bietet Flexbox viele mächtige Funktionen zur Positionierung von Elementen.

Flexbox

Eine typische Anwendung von Flexbox ist die Aufteilung eines Layouts in Spalten.

CSS Grids

Möchte man aber statt Spalten einen Gestaltungsraster, der auch über mehrere «Zeilen» hinweg funktioniert, so arbeitet man besser gleich mit CSS-Grids.

Hauptachse & Kreuzachse

Grundsätzlich benötigt man in HTML einen durch den Display-Modus flex definierten Container, in dem die zu verteilenden Elemente enthalten sind. Innerhalb dieses Containers können Haupt- und die Kreuzachse anschliessend beeinflusst werden. Die Hauptachse ordnet standardmässig von links nach rechts, die Kreuzachse von oben nach unten.

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: flex;
}

Die Elemente, die dann im Container eingefügt werden, orientieren sich nun an der Hauptachse.

Container – flex-direction

Über das Attribut flex-direction können wir die Hauptachse in horizontalen Zeilen oder vertikalen Spalten orientieren. Neben row und column gibt es jeweils noch row-reverse und column-reverse, bei denen die Reihenfolge umgekehrt wird.

Row (Standard)

.container {
  display: flex;
  flex-direction: row;
}

Column

.container {
  display: flex;
  flex-direction: column;
}

Container – flex-wrap

Standardmässig werden alle Elemente auf einer Zeile angepasst. Mit flex-wrap kann gesteuert werden, wie sich die Elemente innerhalb des Containers anordnen sollen.

nowrap (Standard)

.container {
  display: flex;
  flex-wrap: nowrap;
}

wrap

.container {
  display: flex;
  flex-wrap: wrap;
}

wrap-reverse

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Container – justify-content

Eine der wichtigsten eigenschaften vom Container ist das Attribut justify-content. Es hilft dabei zu bestimmen, wie die Elemente im Container ausgerichtet werden sollen. Abgebildet sind die meist verwendeten Werte. Es gibt zusätzlich noch Möglichkeiten, sich an der Schreibrichtung zu orientieren. Dies ist vorallem bei internationalen Websites mit verschiedenen Schreibrichtungen (links nach rechts & rechts nach links) nützlich.

flex-start (Standard)

.container {
  display: flex;
  justify-content: flex-start;
}

flex-end

.container {
  display: flex;
  justify-content: flex-end;
}

center

.container {
  display: flex;
  justify-content: center;
}

space-between

.container {
  display: flex;
  justify-content: space-between;
}

space-around

.container {
  display: flex;
  justify-content: space-around;
}

space-evenly

.container {
  display: flex;
  justify-content: space-evenly;
}

Container – align-items

Das Attribut align-items steuert, wie die Elemente innerhalb des Containers auf der Kreuzachse ausgerichtet werden. Neben den abgebildeten Werten gibt es noch weitere. Insbesondere wird mit baseline auch die Möglichkeit, die Elemente an der Schriftlinie auszurichten, ab und an verwendet.

stretch (Standard)

.container {
  display: flex;
  align-items: stretch;
}

flex-start

.container {
  display: flex;
  align-items: flex-start;
}

flex-end

.container {
  display: flex;
  align-items: flex-end;
}

center

.container {
  display: flex;
  align-items: center;
}

Container – align-content

Entsprechend zu justify-content, das die Verteilung der Elemente auf der Hauptachse steuert, wird align-content genutzt, um die Elemente auf der Kreuzachse einzurichten.
Hier exemplarisch einige Werte:

stretch (Standard)

.container {
  display: flex;
  align-content: stretch;
}

flex-start

.container {
  display: flex;
  align-content: flex-start;
}

flex-end

.container {
  display: flex;
  align-content: flex-end;
}

space-evenly

.container {
  display: flex;
  align-content: space-evenly;
}

Elemente – flex-basis, flex-grow & flex-shrink

Wenn kein flex-basis angegeben wird, orientiert sich die Breite der Elemente auf der Hauptachse an dem width-Wert des Elements. Wird jedoch ein flex-basis-Wert für die Elemente angegeben, bleibt der width-Wert unberücksichtigt und man kann stattdessen mit flex-basis ein Verhältnis zwischen den einzelnen Elementen angeben. Somit ist der Container flexibel und der Inhalt passt sich an. Die Attribute flex-grow und flex-shrink geben an, wie unbenutzter Raum verwendet werden soll.

flex-basis

.item1, .item2, .item3 {
  flex-basis: 20%;
}

flex-grow

.item1, .item2, .item3 {
  flex-basis: 20%;
}
.item1, .item3 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}

flex-shrink

.item1, .item2, .item3 {
  flex-basis: 40%;
}
.item1, .item3 {
  flex-shrink: 1;
}
.item2 {
  flex-shrink: 2;
}

Fazit

Es gibt noch verschiedenste weitere Optionen, die mit Flexbox kontrolliert werden können. So lässt sich zum Beispiel mit order die Reihenfolge der Elemente individuell ordnen und mit align-self können einzelne Elemente entlang der Kreuzachse orientiert werden. Doch schon mit wenigen Attributen kann man meist die gewünschte Layout-Anordnung erreichen. Aufgrund der auffallenden Flexibilität von Flexbox ist es allerdings ab und an schwierig, sich hineinzudenken. Aber mit der Zeit lernt man die vielfältigen Anordnungen schätzen, die ein lebendiges Layout ermöglichen.

Autor

Stefan Huber unterrichtet an der Schule für Gestaltung Zürich im Lehrgang HF Interaction Design und ist als Web-Entwickler tätig.