6.4.10 CSS Flexbox – Basiskonzept

Das CSS Flexible Box Layout (kurz: Flexbox) ist eine moderne CSS-Technik, die es ermöglicht, Elemente innerhalb eines Containers flexibel anzuordnen und auszurichten. Mit Flexbox können Sie Elemente sowohl horizontal als auch vertikal verteilen und deren Größe sowie Reihenfolge per CSS steuern.

Ein bedeutender Vorteil von Flexbox ist die vereinfachte vertikale Ausrichtung von Elementen, was mit früheren Layoutmethoden oft herausfordernd war (siehe CSS Float). Flexbox arbeitet mit zwei Achsen: der Hauptachse und der Querachse. Dies ermöglicht eine flexible Gestaltung von Layouts, die sich dynamisch an verschiedene Bildschirmgrößen anpassen können.

Die Spezifikation des CSS Flexible Box Layout Module liegt beim W3C als Candidate Recommendation vor. Trotz dieses Status wird Flexbox in seiner Grundfunktionalität von allen modernen Browsern unterstützt. Laut Can I use beträgt die Unterstützung für Flexbox weltweit über 99%.

Beachten Sie, dass erste Implementierungen von Flexbox ab 2009 unterschiedliche Bezeichnungen und Eigenschaften in den Browsern aufwiesen. Beim Suchen nach Beispielen im Internet ist es daher wichtig sicherzustellen, dass diese dem aktuellen Standard entsprechen. Aktuelle Ressourcen wie der Leitfaden zur Flexbox von CSS-Tricks bieten umfassende Informationen und Beispiele zum aktuellen Stand der Flexbox-Technologie.


Basis Konzept der Flexbox – display

display: flex | inline-flex;

Eine Flexbox wird über die CSS-Eigenschaft display aktiviert. Mit dieser Eigenschaft können Sie die Elemente wie gewohnt zwischen Block- und Inline-Verhalten unterscheiden. Innerhalb der Flexbox gelten jedoch neue Regeln: Elemente werden entlang einer Hauptachse (Main Axis) flexibel verteilt.


Basis Konzept der Flexbox – flex-direction

flex-direction: row | row-reverse | column | column-reverse;

Die Richtung der Hauptachse wird durch flex-direction definiert:

Wert Richtung der Hauptachse
row Horizontal – Richtung des Elementflusses
row-reverse Horizontal – entgegengesetzte Richtung
column Vertikal – von oben nach unten
column-reverse Vertikal – von unten nach oben

Aber Vorsicht, denn das ist tatsächlich auch die Richtung, in der die Elemente in die Flexbox fließen. Dadurch ändert sich die Reihenfolge der Elemente in der Darstellung. Folgendes Beispiel soll dieses Verhalten einmal nachstellen.

Beispiel: Ändern der Hauptachse

Oben haben wir flex-direction: row; und unten flex-direction: row-reverse;

Sourcecode zum Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Einfache Flexboxen mit Änderung der Hauptachse</title>
<style>
    .flex-container {
    margin: auto;
    width: 400px;
    height: 100px;
    border: 1px solid gray;
    background-color: lightgray;

    display: flex;
    flex-direction: row; /* default */
    }
    .flex-container.reverse {
    flex-direction: row-reverse;
    }

    /* Innere Element zur besseren Darstellung stylen */
    .flex-container>div {
    border: 1px solid darkblue;
    background-color: lightblue;
    text-align: center;
    min-width: 50px;
    }
</style>
</head>
<body>
<div class="flex-container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>
<div class="flex-container reverse">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>
</body>
</html>

Basis Konzept der Flexbox – order

order: [ganzzahliger Wert]; /* default: 0 */

Mit der Eigenschaft order können Sie die Reihenfolge der inneren Elemente ändern, ohne die Reihenfolge im HTML anzupassen. Dies ist besonders nützlich für unterschiedliche Bildschirmauflösungen, um weniger wichtige Inhalte nach hinten zu verschieben.

Beispiel: Reihenfolge ändern

Sourcecode zum Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ändern der Reihenfolge innerhalb der Flexbox</title>
<style>
    .flex-container {
    margin: auto;
    width: 400px;
    height: 100px;
    border: 1px solid gray;
    background-color: lightgray;
    display: flex;
    }
    /* Innere Element zur besseren Darstellung stylen */
    .flex-container>div {
    border: 1px solid darkblue;
    background-color: lightblue;
    text-align: center;
    min-width: 50px;
    }
    .flex-container .a {
    order: 3;
    }
    .flex-container .b {
    order: 1;
    }
    .flex-container .c {
    order: 2;
    }
</style>
</head>
<body>
<div class="flex-container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
</body>
</html>

Flexbox bietet eine flexible Möglichkeit, Layouts zu erstellen. Weitere Eigenschaften wie justify-content oder align-items ergänzen die Funktionalität und machen Flexbox zu einer vielseitigen Lösung für moderne Layouts.