Der vollständige Leitfaden zu Flexbox

Einführung

Unser umfassender Leitfaden zu CSS-Flexbox-Layouts. Dieser Leitfaden erklärt alles Wissenswerte über Flexbox und konzentriert sich dabei auf die verschiedenen Attribute des Elternelements (Flex-Container) und der Kindelemente (Flex-Items). Er enthält außerdem historische Beispiele, Demos, Vorlagen und eine Übersicht der Browserkompatibilität.

Kontext

Das Flexbox-Layoutmodul (eine W3C-Kandidatenempfehlung vom Oktober 2017) zielt darauf ab, eine effizientere Möglichkeit zu bieten, den Platz zwischen Elementen innerhalb eines Containers anzuordnen, auszurichten und zu verteilen, selbst wenn deren Größe unbekannt und/oder dynamisch ist (daher das Wort “flexibel”).

Die Grundidee eines flexiblen Layouts besteht darin, dass der Container die Breite/Höhe (und die Reihenfolge) seiner Elemente anpassen kann, um den verfügbaren Platz optimal zu nutzen (vor allem, um verschiedene Anzeigegeräte und Bildschirmgrößen zu berücksichtigen). Ein flexibler Container vergrößert die Elemente, um den verfügbaren Platz auszufüllen, oder verkleinert sie, um einen Überlauf zu verhindern.

Das wichtigste Merkmal des Flexbox-Layouts ist seine Richtung, im Gegensatz zu herkömmlichen Layouts (bei denen ein Block vertikal ausgerichtet und innerhalb eines horizontalen Layouts positioniert ist). Flexbox-Layouts eignen sich zwar gut für Seiten, bieten aber nicht die nötige Flexibilität für große oder komplexe Anwendungen (insbesondere beim Ändern der Ausrichtung, Größe, Streckung, Skalierung usw.).

Hinweis: Das Flexbox-Layout eignet sich besser für Anwendungskomponenten und kleinere Layouts, während das Grid-Layout für größere Layouts gedacht ist.

Grundlagen und Terminologie

Da Flexbox ein vollständiges Modul und nicht nur eine einzelne Funktion ist, umfasst es zahlreiche Elemente, darunter alle seine Eigenschaften. Einige davon werden dem Container (dem Elternelement, dem sogenannten “Flex-Container”) zugewiesen, andere den Kindelementen (den sogenannten “Flex-Elementen”).

Während das “reguläre” Layout auf Block- und Inline-Flussrichtungen basiert, basiert das flexible Layout auf “flexiblen Flussrichtungen”. Bitte sehen Sie sich diese Spezifikation an; sie erläutert das Grundprinzip des flexiblen Layouts.

Die Elemente werden entlang der Hauptachse (vom Hauptstartpunkt zum Hauptende) oder der Querachse (vom Querstartpunkt zum Querende) angeordnet.

• Hauptachse – Die Hauptachse des Flex-Containers ist die primäre Achse, entlang der Flex-Elemente platziert werden. Beachten Sie, dass sie nicht unbedingt horizontal verläuft. Sie hängt von der `flex-direction`-Eigenschaft ab (siehe unten).
• Hauptstart | Hauptende – Flexible Elemente werden im Container vom Hauptstart bis zum Hauptende platziert.
• Originalgröße – Die Breite oder Höhe eines Flex-Elements, je nachdem, welcher Wert in der Originaldimension angegeben ist, entspricht der Originalgröße des Elements. Die Eigenschaft “Originalgröße” des Flex-Elements ist entweder die Eigenschaft “Breite” oder „Höhe“, je nachdem, welcher Wert in der Originaldimension angegeben ist.
• Querachse – Die Achse, die senkrecht zur Hauptachse verläuft, wird als Querachse bezeichnet. Ihre Richtung hängt von der Richtung der Hauptachse ab.
• Kreuzstart | Kreuzende – Die Flexschnüre werden mit Artikeln befüllt und in den Behälter gelegt, beginnend an der Kreuzstartseite des Flexbehälters und in Richtung Kreuzende.
• Kreuzgröße – Die Breite oder Höhe eines Flex-Elements, je nachdem, welcher Wert in der Kreuzdimension angegeben ist, ist die Kreuzgröße des Elements. Die Eigenschaft “Kreuzgröße” entspricht dem Wert in der Kreuzdimension, entweder “Breite” oder „Höhe“.

Flexbox-Funktionen

Eigenschaften für Eltern
(Container)

Anzeige

Dies definiert einen flexiblen Container. Je nach dem angegebenen Wert wird er als Inline- oder Blockcontainer dargestellt. Er bietet einen flexiblen Kontext für alle seine direkten Kindelemente.

.container {
display: flex; /* or inline-flex */
}

Biegerichtung

Dadurch wird die Hauptachse definiert und somit die Richtung festgelegt, in der Flex-Elemente innerhalb des Flex-Containers platziert werden. Flexbox (abgesehen vom optionalen Zeilenumbruch) ist ein unidirektionales Layoutkonzept. Flex-Elemente befinden sich üblicherweise in horizontalen Zeilen oder vertikalen Spalten.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• ROW (Standard): Von links nach rechts (ltr). Von rechts nach links (rtl).
• Zeilenumkehr: von rechts nach links in ltr. von links nach rechts in rtl
• SPALTE: Wie eine Zeile, aber von oben nach unten
• Spaltenumkehrung: Wie umgekehrte Zeile, aber von unten nach oben

Flex Wrap

Standardmäßig werden flexible Elemente in einer Zeile angeordnet. Sie können dies ändern und bei Bedarf festlegen, dass Elemente mit dieser Eigenschaft geschlossen werden können.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (Standard): Alle Flex-Elemente werden in einer Zeile umgebrochen.
• Wickeln: Flexible Artikel werden über mehrere Linien von oben nach unten gewickelt.
• Wrap-Reverse: Flexible Artikel werden in mehreren Reihen von unten nach oben umwickelt.

FLEX-Flow

Dies ist eine Kurzform für die Eigenschaften `flex-direction` und `flex-width`, die zusammen die Haupt- und Querachse des Flex-Containers festlegen. Der Standardwert ist `row nowrap`.

.container {
flex-flow: column wrap;
}

Inhalt ausrichten

Dies legt die Ausrichtung entlang der Hauptachse fest. Dadurch wird überschüssiger Leerraum verteilt, wenn alle flexiblen Elemente einer Zeile unflexibel sind oder ihre maximale Größe erreicht haben. Außerdem ermöglicht es eine gewisse Kontrolle über die Ausrichtung von Elementen, die über den Zeilenrand hinausragen.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (Standard): Die Elemente werden am Anfang der Flex-Richtung angeordnet.
• Flex-Ende: Die Artikel werden am Ende der Flexrichtung verpackt.
• START: Die Gegenstände werden in Richtung des Schreibmodusbeginns gepackt.
• ENDE: Die Elemente werden gegen Ende der Schreibrichtung gepackt.
• LINKS: Die Gegenstände werden in Richtung des linken Randes des Containers gepackt, es sei denn, dies ist mit der Flexrichtung nicht vereinbar; in diesem Fall verhält es sich wie am Anfang.
• RECHTS: Die Gegenstände werden in Richtung des rechten Randes des Behälters gepackt, es sei denn, es ist sinnvoll, in diese Richtung flexibel zu sein; dann verhält es sich wie das rechte Ende.
• MITTE: Die Elemente sind entlang der Linie zentriert.
• Abstand zwischen den Elementen: Die Elemente sind gleichmäßig in der Reihe verteilt. Das erste Element befindet sich an der Startlinie, das letzte Element an der Ziellinie.
• Abstand um die Elemente: Die Elemente sind gleichmäßig in einer Reihe angeordnet, mit gleichem Abstand um sie herum. Beachten Sie, dass die Abstände optisch nicht gleich sind, da alle Elemente auf beiden Seiten gleich viel Platz haben. Das erste Element hat einen Abstand von einer Einheit zum Rand des Behälters, aber zwei Einheiten Abstand zum nächsten Element, da das nächste Element einen eigenen Abstand hat.
• Gleichmäßig verteilt: Die Elemente sind so verteilt, dass der Abstand zwischen je zwei Elementen (und der Abstand zu den Rändern) gleich ist.

Es gibt außerdem zwei weitere Schlüsselwörter, die Sie mit diesen Werten kombinieren können: «sicher» und „unsicher“. Die Verwendung von „sicher“ stellt sicher, dass Sie, unabhängig von der Art der Positionierung, ein Element nicht so weit vom Seitenrand (z. B. vom oberen Seitenrand) verschieben können, dass der Inhalt nicht mehr scrollbar ist (bekannt als „Datenverlust“).

Elemente ausrichten

Dies definiert das Standardverhalten für die Anordnung flexibler Elemente entlang der Querachse in der aktuellen Zeile. Man kann es sich als die Inhaltsausrichtungs-Variante für die Querachse (senkrecht zur Hauptachse) vorstellen.

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• STRECKEN (Standard): Den Container ausfüllen (minimale/maximale Breite wird weiterhin berücksichtigt)
• flex-start / start / self-start: Elemente werden am Anfang der Querachse platziert. Der Unterschied zwischen diesen Varianten ist subtil und hängt mit der Einhaltung der Flexbox-Richtungsregeln bzw. der Regeln für den Schreibmodus zusammen.
• flex-end / end / self-end: Elemente werden am Ende der Querachse platziert. Der Unterschied ist wiederum subtil und besteht darin, die Flex-Richtungsregeln im Vergleich zu den Schreibmodusregeln zu beachten.
• MITTE: Die Elemente befinden sich auf der Kreuzachse
• Basislinie: Die Elemente sind wie ihre Basislinien ausgerichtet.

Inhalt ausrichten

Wenn auf der Querachse zusätzlicher Platz vorhanden ist, werden die flexiblen Containerzeilen darin ausgerichtet, ähnlich wie justify-content einzelne Elemente auf der Hauptachse ausrichtet.

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• Normal (Standard): Die Elemente werden in ihrer Standardposition gepackt, als ob kein Wert festgelegt worden wäre.
• flex-start / start: Elemente werden an den Anfang des Containers umgebrochen. flex-start (mit erweiterter Unterstützung) gibt die Flex-Richtung an, während start die Schreibrichtung berücksichtigt.
• flex-end / end: Elemente, die bis zum Ende des Containers umgebrochen werden. (Weitere Unterstützung) flex-end gibt die Flex-Richtung an, während end die Schreibrichtung berücksichtigt.
• MITTE: Gegenstände, die sich in der Mitte des Behälters befinden
• Abstand zwischen den Elementen: Die Elemente sind gleichmäßig verteilt. Die erste Zeile befindet sich am Anfang des Containers und die letzte Zeile am Ende des Containers.
• Abstand um die Zeile: Die Elemente sind gleichmäßig verteilt, mit gleichem Abstand um jede Zeile herum.
• Gleichmäßiger Raum: Die Gegenstände sind gleichmäßig verteilt und haben denselben Abstand um sich herum.
• Strecken: Die Linien werden gestreckt, um den verbleibenden Platz auszufüllen.

Lücke, Zeilenlücke, Spaltenlücke

Die Abstandseigenschaft steuert explizit den Abstand zwischen flexiblen Elementen. Dieser Abstand gilt nur zwischen den Elementen, nicht an den äußeren Rändern.

.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}

Dieses Verhalten kann man sich als minimalen Spaltenabstand vorstellen, sodass, wenn der Spaltenabstand irgendwie größer ist (etwa aufgrund von justify-content: spacing-between; ), diese Lücke nur dann eine Auswirkung hat, wenn dieser Abstand kleiner wird.

Dies ist nicht nur bei Flexbox der Fall; Lücken funktionieren auch in Raster- und mehrspaltigen Layouts.

Flexbox-Präfix

Flexbox benötigt bestimmte Herstellerpräfixe, um möglichst viele Browser zu unterstützen. Dies beschränkt sich nicht nur auf das Voranstellen des Herstellerpräfixes vor Attribute, sondern erfordert tatsächlich komplett andere Eigenschaftsnamen und -werte. Grund dafür ist, dass sich die Flexbox-Spezifikation im Laufe der Zeit geändert hat, wodurch «alte», «Zwischen-» und «neue» Versionen entstanden sind.

Die beste Vorgehensweise ist vielleicht, mit der neuen (und endgültigen) Syntax zu schreiben und das CSS durch Autoprefixer laufen zu lassen, das die Rücktaste sinnvoll nutzt.

Alternativ dazu gibt es hier einen Sass @mixin, der bei einigen Präfixen hilft und Ihnen auch eine Vorstellung davon gibt, was zu tun ist:

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val; 
-moz-box-ordinal-group: $val; 
-ms-flex-order: $val; 
-webkit-order: $val; 
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}

Beispiele

Beginnen wir mit einem sehr einfachen Beispiel, das ein fast alltägliches Problem löst: perfekte Fokussierung. Mit Flexbox ist das denkbar einfach.

<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

Dies liegt daran, dass ein automatisch festgelegter Rand in einem flexiblen Container zusätzlichen Platz beansprucht. Durch die Festlegung eines automatischen Randes wird das Element daher perfekt auf beiden Achsen zentriert.

Betrachten wir nun einige weitere Eigenschaften. Nehmen wir eine Liste mit sechs Elementen, die alle feste Abmessungen haben, aber automatisch skaliert werden können. Wir möchten, dass sie gleichmäßig auf der horizontalen Achse verteilt sind, sodass beim Ändern der Browsergröße alles ohne zusätzliche Medienanfragen korrekt skaliert wird.

.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction 
and if we allow the items to wrap 
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

Erledigt. Alles Weitere ist reine Stilfrage. Unten ist ein Beispielcode. Schau dir das Ganze mal auf CodePen an und ändere die Fenstergröße, um zu sehen, was passiert.

Versuchen wir etwas anderes. Stellen wir uns vor, wir haben ein rechtsbündiges Navigationselement am oberen Rand unserer Website, möchten es aber auf mittelgroßen Bildschirmen zentrieren und auf kleinen Geräten einspaltig anzeigen. Ganz einfach.

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}

Lasst uns etwas Besseres ausprobieren und die Flexibilität flexibler Elemente nutzen! Wie wäre es mit einem Mobile-First-Layout mit drei Spalten, einem Header und Footer in voller Breite? Und das unabhängig von der Reihenfolge der Quelltexte.

<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>

.wrapper {
display: flex;
flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}