Mobiles Design mit dem Flexbox Modul gestalten

Mit dem Flexible Box Layout Modul lassen sich ganz einfach neue Layouts, besonders für mobile Designs erstellen und definieren und das nur mit CSS.
Dabei werden auf effizientere Weise HTML-Container unabhängig vom HTML-Code ausgerichtet und verteilt. Es ist ebenfalls möglich den Raum flexibel zu verkleinern oder zu vergrößern. Hierzu sind keine Größenangaben und CSS-Eigenschaften wie position, float oder clear nötig. 
Die Grundidee für Flexbox ist es den HTML-Containern die Möglichkeit zu geben, sich selbst in Höhe und Breite zu verändern um den verfügbaren Raum zu füllen. Flexbox ist zudem richtungsunabhängig da Block Layouts immer vertikal orientiert und inline horizontal ausgerichtet sind.

Flexbox wird von allen Browsern mit der aktuellsten Version mit Ausnahme des Internet Explorers unterstützt.
Unter den älteren Browser-Versionen sind einige Bugs bekannt, die in einer Übersicht nachzulesen sind. 
Hilfreiche Informationen zu Cross-Browser-Workarounds wurden zudem zusammengestellt.

Flexbox Grundlagen: Begriffe und Funktionen 

Im Flexbox-Modul wird ein Teil der Eigenschaften am Eltern-Element (Flex-Container) angewandt, die anderen wiederum an den Kinder-Elementen (Flex-Item).
Während reguläre Layouts auf block und inline Ausrichtung aufbauen, baut Flexbox auf "Flex-flow" Ausrichtung auf. Die Idee hinter dieser Methode veranschaulicht folgende Grafik:

Grundsätzlich richten sich die Items an der Hauptachse von Haupt-Start nach Haupt-Ende oder an der Querachse von Quer-Start nach Quer-Ende aus.

• Hauptachse: Die Hauptachse ist die primäre Achse, welche nicht grundsätzlich horizontal sein muss, dies ist abhängig von der Flex-Direction-Eigenschaft. An dieser Achse richten sich die Items aus.
• Querachse: Die Querachse ist immer senkrecht zur Hauptachse, die Richtung ist abhängig von der Richtung der Hauptachse.
• Hauptgröße: Breite oder Höhe eines Flex-Containers
• Quergröße: Breite oder Höhe eines Flex-Items
• Haupt-Start, Haupt-Ende: Items richten sich ausgehend von Haupt-Start nach Haupt-Ende innerhalb des Flexcontainers aus.
• Quer-Start, Quer-Ende: Flexlinien werden mit Items gefüllt, beginnend bei Quer-Start nach Quer-Ende.

Tutorial: Flexbox CSS-Eigenschaften für den Flexcontainer

Nachfolgend werden anhand von Beispielen die einzelnen CSS-Eigenschaften erläutert. 
Unter den Beschreibungen der Eigenschaften verweisen Links zu unserem Tutorial mit dem verwendeten Code, einer visuellen Darstellung und einem Editor zum testen.

Grundgerüst: In unserem Flexbox Tutorial Part 1 auf CodePen ist der vollständige Code mit visueller Darstellung zu finden.

Display

Um Flexbox für einen Container freizuschalten, muss man im CSS folgendes eintragen:
.flexcontainer {
    display: flex;
}
Bestenfalls verwendet man Mixins um die jeweiligen Browser anzusprechen.
Zu Display ist in unserem Flexbox Tutorial Part 2 der vollständige Code mit visueller Darstellung zu sehen.

Flex-direction

Diese Eigenschaft bestimmt die Richtung in die die Items entlang der Hauptachse fließen werden.
Zulässige Werte:

Zu Flex-direction ist im Flexbox Tutorial Part 3 der vollständige Code mit visueller Darstellung zu sehen.

Flex-wrap

Standardmäßig versucht Flexbox alle Inhalte auf eine Zeile anzupassen. Mit dieser Eigenschaft kann man das Verhalten ändern.

Zu Flex-wrap ist im Flexbox Tutorial Part 4 ist der vollständige Code mit visueller Darstellung zu sehen.

Flex-flow

In Flex-flow sind die beiden Attribute Flex-direction und Flex-wrap zusammengefasst. Default ist immer auf flex-direction: row und flex-wrap: no-wrap gesetzt.
z.B. flex-flow: flexdirection flex-wrap;

Justify-content

Definiert die Ausrichtung entlang der Hauptachse. Es ist hilfreich freien Platz im Container für unflexible oder flexible Elemente zu verteilen.

In unserem Flexbox Tutorial Part 5 ist der vollständige Code mit visueller Darstellung nachzulesen.

Align-items

Align-items macht das Gleiche wie justify-content, nur werden hier die Elemente an der Querachse entlang angepasst.

In unserem Flexbox Tutorial Part 6 ist der vollständige Code mit visueller Darstellung nachzulesen.

Align-content

Align-content richtet sich entlang der Querachse aus. Dies hat nur Auswirkungen wenn mehrere Reihen vorhanden sind.

In unserem Flexbox Tutorial Part 7 ist der vollständige Code mit visueller Darstellung nachzulesen.

Flexbox CSS-Eigenschaften für Flexitems

Order

Standardmäßig werden Flex-Items in der Standardreihenfolge angelegt. Die Eigenschaft steuert die Reihenfolge, in der sie im Flex-Container angezeigt werden.

.teaser.flexitem:nth-child(1) {
  order: 2;
}
.teaser.flexitem:nth-child(2) {
  order: 5;
}
.teaser.flexitem:nth-child(3) {
  order: 1;
}
.teaser.flexitem:nth-child(4) {
  order: -1;
}
.teaser.flexitem:nth-child(5) {
  order: 0;
}

In unserem Flexbox Tutorial Part 8 ist der vollständige Code mit visueller Darstellung nachzulesen.

Flex-grow

Diese Eigenschaft definiert die Fähigkeit ein Flex-Element "wachsen" zu lassen. Es wird ein uneinheitlicher Wert akzeptiert, der proportional ist. Es bestimmt welche Menge des verfügbaren Platzes innerhalb des Flex-Containers das Element einnehmen soll.
Wenn alle Elemente flex-grow auf eins gesetzt sind, wird der verbleibende Platz im Container gleichmäßig auf alle Flex Items verteilt. Wenn einer der Flex Items einen Wert von zwei hat, würde der verbleibende Raum doppelt so viel Platz einnehmen wie die anderen.
Negative Zahlen sind ungültig.

.teaser.flexitem:nth-child(2) {
  order: 5;
  flex-grow: 2;
}

In unserem Flexbox Tutorial Part 9 ist der vollständige Code mit visueller Darstellung nachzulesen.

Flex-shrink

Diese Eigenschaft definiert die Fähigkeit eines Flex-Elements zu "schrumpfen".

Negative Zahlen sind ungültig.

.teaser.flexitem:nth-child(1) {
order: 2;
flex-shrink: 2;
}

.teaser.flexitem:nth-child(2) {
order: 5;
flex-grow: 1;
}

.teaser.flexitem:nth-child(3) {
order: 1;
flex-shrink: 2;
}

.teaser.flexitem:nth-child(4) {
order: -1;
flex-shrink: 2;
}

.teaser.flexitem:nth-child(5) {
order: 0;
flex-grow: 1;
}

In unserem Flexbox Tutorial Part 10 ist der vollständige Code mit visueller Darstellung.

Flex-basis

Dies definiert die Standardgröße eines Elements, bevor der verbleibende Speicherplatz verteilt wird. Es kann eine Länge (z. B. 15%, 3rem, etc.) oder ein Schlüsselwort sein. Das Schlüsselwort auto bedeutet "Blick auf meine Breite oder Höhe Eigenschaft". Das Content Schlüsselwort bedeutet "Größe basiert auf dem Inhalt des Elements", dieses Schlüsselwort wird noch nicht so gut unterstützt, daher ist es schwer zu testen, wie die anderen Eigenschaften max-content, min-content und fit-content wirken. (Support: http://caniuse.com/#search=fit-content). Beispielt für max-content, min-content: https://codepen.io/Kseso/pen/KJIeD

Wenn dieser Wert auf 0 gesetzt ist, wird der zusätzliche Speicherbereich nicht berücksichtigt. Wenn er auf auto gesetzt ist, wird der zusätzliche Speicherbereich auf der Grundlage seines Flex-Grow-Werts verteilt.

In unserem Flexbox Tutorial Part 11 ist der vollständige Code mit visueller Darstellung nachzulesen.

Flex

Dies ist die Kurzform die Flex-grow, Flex-shrink und Flex-basis kombiniert. Der zweite und dritte Parameter (Flex-shrink und Flex-basis) sind optional. Die Voreinstellung ist 0 1 auto.

Es wird empfohlen, diese shorthand-Eigenschaft zu verwenden, anstatt die einzelnen Eigenschaften festzulegen. Die Kurzform setzt die anderen Werte intelligent.

Align-Self

Dadurch kann die Standardausrichtung (oder diejenige, die durch align-items spezifiziert wird) für einzelne Flex-Elemente überschrieben werden.

In der Erläuterung zu align-items sind die verfügbaren Werte erklärt.

Die Eigenschaften float, clear und vertical-align haben keinen Einfluss auf ein Flex-Element.

Nr 5 ) flex-end

Nr 4 ) strech

Nr 3 ) center

Nr 2 ) flex-start

Nr 1 ) baseline

In unserem Flexbox Tutorial Part 12 ist der vollständige Code mit visueller Darstellung nachzulesen.

Mithilfe unseres Tutorials und den praktischen Übungen können nun einfach und flexibel responsive Layouts erstellt werden. Viel Spaß beim ausprobieren.