Responsive Layout mit Flexbox

Flexbox ist ein CSS-Layout-System, das für eindimensionale Layouts entwickelt wurde. Bootstrap stellt alle wichtigen Flexbox-Eigenschaften als Utility-Klassen zur Verfügung, wodurch komplexe Layouts ohne eigenes CSS möglich werden.

9.1.1 Flexbox-Container aktivieren

<!-- Normales div - Elemente stapeln sich vertikal -->
<div class="border p-3 mb-3">
    <div class="bg-primary text-white p-2">Element 1</div>
    <div class="bg-secondary text-white p-2">Element 2</div>
    <div class="bg-success text-white p-2">Element 3</div>
</div>

<!-- Flexbox-Container - Elemente ordnen sich horizontal an -->
<div class="d-flex border p-3 mb-3">
    <div class="bg-primary text-white p-2 me-2">Element 1</div>
    <div class="bg-secondary text-white p-2 me-2">Element 2</div>
    <div class="bg-success text-white p-2">Element 3</div>
</div>

<!-- Inline-Flexbox für Elemente, die im Textfluss bleiben sollen -->
<div class="d-inline-flex border p-2">
    <span class="bg-info text-white px-2 me-1">Inline</span>
    <span class="bg-warning text-dark px-2">Flex</span>
</div>

9.1.2 Responsive Flexbox-Container

Flexbox kann responsive aktiviert werden, um bei verschiedenen Bildschirmgrößen unterschiedliches Verhalten zu zeigen:

<!-- Flexbox nur auf größeren Bildschirmen -->
<div class="d-block d-md-flex">
    <div class="bg-primary text-white p-3 mb-2 mb-md-0 me-md-2">
        Auf kleinen Bildschirmen: Block
    </div>
    <div class="bg-secondary text-white p-3">
        Auf mittleren+ Bildschirmen: Flex
    </div>
</div>

<!-- Verschiedene Flex-Verhaltensweisen je nach Bildschirmgröße -->
<div class="d-flex d-lg-inline-flex">
    <div class="bg-success text-white p-2 me-2">Responsive</div>
    <div class="bg-danger text-white p-2">Flexbox</div>
</div>

9.2 Justify-content: Horizontale Ausrichtung steuern

Die justify-content Eigenschaft kontrolliert, wie Flex-Items entlang der Hauptachse (standardmäßig horizontal) ausgerichtet werden:

<!-- justify-content-start: Elemente am Anfang -->
<div class="d-flex justify-content-start bg-light p-3 mb-2">
    <div class="bg-primary text-white p-2 me-1">1</div>
    <div class="bg-secondary text-white p-2 me-1">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- justify-content-center: Elemente zentriert -->
<div class="d-flex justify-content-center bg-light p-3 mb-2">
    <div class="bg-primary text-white p-2 me-1">1</div>
    <div class="bg-secondary text-white p-2 me-1">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- justify-content-end: Elemente am Ende -->
<div class="d-flex justify-content-end bg-light p-3 mb-2">
    <div class="bg-primary text-white p-2 me-1">1</div>
    <div class="bg-secondary text-white p-2 me-1">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- justify-content-between: Gleichmäßige Verteilung mit Abständen zwischen Elementen -->
<div class="d-flex justify-content-between bg-light p-3 mb-2">
    <div class="bg-primary text-white p-2">1</div>
    <div class="bg-secondary text-white p-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- justify-content-around: Gleichmäßige Verteilung mit Abständen um alle Elemente -->
<div class="d-flex justify-content-around bg-light p-3 mb-2">
    <div class="bg-primary text-white p-2">1</div>
    <div class="bg-secondary text-white p-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- justify-content-evenly: Gleichmäßige Verteilung mit gleichen Abständen -->
<div class="d-flex justify-content-evenly bg-light p-3">
    <div class="bg-primary text-white p-2">1</div>
    <div class="bg-secondary text-white p-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

9.2.1 Responsive justify-content

<!-- Zentriert auf kleinen Bildschirmen, space-between auf größeren -->
<div class="d-flex justify-content-center justify-content-md-between bg-light p-3">
    <div class="bg-info text-white p-2">Links</div>
    <div class="bg-warning text-dark p-2">Rechts</div>
</div>

<!-- Verschiedene Ausrichtungen für verschiedene Bildschirmgrößen -->
<div class="d-flex justify-content-start justify-content-sm-center justify-content-lg-end bg-light p-3">
    <div class="bg-danger text-white p-2">Responsive Ausrichtung</div>
</div>

9.3 Align-items: Vertikale Ausrichtung kontrollieren

Die align-items Eigenschaft kontrolliert die Ausrichtung entlang der Querachse (standardmäßig vertikal):

<!-- Container mit definierter Höhe für sichtbare Effekte -->
<div class="d-flex align-items-start bg-light p-3 mb-2" style="height: 120px;">
    <div class="bg-primary text-white p-2 me-2">Kurz</div>
    <div class="bg-secondary text-white p-2 me-2" style="height: 60px;">Mittel</div>
    <div class="bg-success text-white p-2">Kurz</div>
</div>

<!-- align-items-center: Vertikale Zentrierung -->
<div class="d-flex align-items-center bg-light p-3 mb-2" style="height: 120px;">
    <div class="bg-primary text-white p-2 me-2">Kurz</div>
    <div class="bg-secondary text-white p-2 me-2" style="height: 60px;">Mittel</div>
    <div class="bg-success text-white p-2">Kurz</div>
</div>

<!-- align-items-end: Ausrichtung am unteren Rand -->
<div class="d-flex align-items-end bg-light p-3 mb-2" style="height: 120px;">
    <div class="bg-primary text-white p-2 me-2">Kurz</div>
    <div class="bg-secondary text-white p-2 me-2" style="height: 60px;">Mittel</div>
    <div class="bg-success text-white p-2">Kurz</div>
</div>

<!-- align-items-stretch: Alle Elemente auf gleiche Höhe strecken -->
<div class="d-flex align-items-stretch bg-light p-3 mb-2" style="height: 120px;">
    <div class="bg-primary text-white p-2 me-2">Gestreckt</div>
    <div class="bg-secondary text-white p-2 me-2">Auf gleiche</div>
    <div class="bg-success text-white p-2">Höhe</div>
</div>

<!-- align-items-baseline: Ausrichtung an der Textbasislinie -->
<div class="d-flex align-items-baseline bg-light p-3">
    <div class="bg-primary text-white p-2 me-2" style="font-size: 2rem;">Groß</div>
    <div class="bg-secondary text-white p-2 me-2">Normal</div>
    <div class="bg-success text-white p-2" style="font-size: 0.8rem;">Klein</div>
</div>

9.3.1 Perfekte Zentrierung

Die Kombination aus justify-content-center und align-items-center ermöglicht perfekte Zentrierung in beide Richtungen:

<!-- Horizontal und vertikal zentriert -->
<div class="d-flex justify-content-center align-items-center bg-primary text-white" style="height: 200px;">
    <div class="text-center">
        <h3>Perfekt zentriert</h3>
        <p class="mb-0">In alle Richtungen</p>
    </div>
</div>

<!-- Responsive Zentrierung -->
<div class="d-flex justify-content-start justify-content-md-center align-items-center bg-light" style="height: 150px;">
    <div class="bg-info text-white p-3">
        Links auf Mobile, zentriert auf Desktop
    </div>
</div>

9.4 Flex-Richtung und -Wrap: Layout-Kontrolle erweitern

9.4.1 Flex-Direction: Die Hauptachse ändern

Standardmäßig ordnet Flexbox Elemente horizontal an. Mit flex-direction können Sie dies ändern:

<!-- flex-row: Horizontale Anordnung (Standard) -->
<div class="d-flex flex-row bg-light p-3 mb-3">
    <div class="bg-primary text-white p-2 me-2">1</div>
    <div class="bg-secondary text-white p-2 me-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- flex-row-reverse: Horizontale Anordnung, umgekehrte Reihenfolge -->
<div class="d-flex flex-row-reverse bg-light p-3 mb-3">
    <div class="bg-primary text-white p-2 me-2">1</div>
    <div class="bg-secondary text-white p-2 me-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- flex-column: Vertikale Anordnung -->
<div class="d-flex flex-column bg-light p-3 mb-3" style="height: 200px;">
    <div class="bg-primary text-white p-2 mb-2">1</div>
    <div class="bg-secondary text-white p-2 mb-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

<!-- flex-column-reverse: Vertikale Anordnung, umgekehrte Reihenfolge -->
<div class="d-flex flex-column-reverse bg-light p-3" style="height: 200px;">
    <div class="bg-primary text-white p-2 mb-2">1</div>
    <div class="bg-secondary text-white p-2 mb-2">2</div>
    <div class="bg-success text-white p-2">3</div>
</div>

9.4.2 Responsive Flex-Direction

<!-- Vertikal auf kleinen Bildschirmen, horizontal auf großen -->
<div class="d-flex flex-column flex-md-row bg-light p-3">
    <div class="bg-primary text-white p-3 mb-2 mb-md-0 me-md-2">
        Navigation
    </div>
    <div class="bg-secondary text-white p-3 flex-grow-1">
        Hauptinhalt
    </div>
</div>

<!-- Umgekehrte Reihenfolge nur auf großen Bildschirmen -->
<div class="d-flex flex-column flex-lg-row-reverse bg-light p-3">
    <div class="bg-info text-white p-3 mb-2 mb-lg-0 ms-lg-2">
        Sidebar (rechts auf Desktop)
    </div>
    <div class="bg-warning text-dark p-3 flex-grow-1">
        Hauptinhalt (links auf Desktop)
    </div>
</div>

9.4.3 Flex-Wrap: Umbruchverhalten kontrollieren

Standardmäßig versuchen Flex-Items, in eine Zeile zu passen. Mit flex-wrap können Sie Umbrüche erlauben:

<!-- flex-nowrap: Alle Elemente in einer Zeile (Standard) -->
<div class="d-flex flex-nowrap bg-light p-3 mb-3" style="width: 300px;">
    <div class="bg-primary text-white p-2 me-1" style="min-width: 100px;">Item 1</div>
    <div class="bg-secondary text-white p-2 me-1" style="min-width: 100px;">Item 2</div>
    <div class="bg-success text-white p-2 me-1" style="min-width: 100px;">Item 3</div>
    <div class="bg-danger text-white p-2" style="min-width: 100px;">Item 4</div>
</div>

<!-- flex-wrap: Elemente können umbrechen -->
<div class="d-flex flex-wrap bg-light p-3 mb-3" style="width: 300px;">
    <div class="bg-primary text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 1</div>
    <div class="bg-secondary text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 2</div>
    <div class="bg-success text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 3</div>
    <div class="bg-danger text-white p-2 mb-1" style="min-width: 100px;">Item 4</div>
</div>

<!-- flex-wrap-reverse: Umbruch mit umgekehrter Reihenfolge -->
<div class="d-flex flex-wrap-reverse bg-light p-3" style="width: 300px;">
    <div class="bg-primary text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 1</div>
    <div class="bg-secondary text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 2</div>
    <div class="bg-success text-white p-2 me-1 mb-1" style="min-width: 100px;">Item 3</div>
    <div class="bg-danger text-white p-2 mb-1" style="min-width: 100px;">Item 4</div>
</div>

9.4.4 Responsive Flex-Wrap

<!-- Kein Umbruch auf kleinen Bildschirmen, Umbruch auf großen -->
<div class="d-flex flex-nowrap flex-lg-wrap bg-light p-3">
    <div class="bg-info text-white p-2 me-1 mb-1" style="min-width: 150px;">Feature 1</div>
    <div class="bg-warning text-dark p-2 me-1 mb-1" style="min-width: 150px;">Feature 2</div>
    <div class="bg-success text-white p-2 me-1 mb-1" style="min-width: 150px;">Feature 3</div>
    <div class="bg-danger text-white p-2 mb-1" style="min-width: 150px;">Feature 4</div>
</div>

9.5 Praktische Anwendungen

9.5.1 Navbar-Layout

<nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
    <!-- Logo links -->
    <div class="d-flex align-items-center">
        <div class="bg-primary rounded p-2 me-2">LOGO</div>
        <span class="fw-bold">MeineFirma</span>
    </div>
    
    <!-- Navigation zentriert (versteckt auf kleinen Bildschirmen) -->
    <div class="d-none d-md-flex">
        <a href="#" class="text-white text-decoration-none me-3">Home</a>
        <a href="#" class="text-white text-decoration-none me-3">Produkte</a>
        <a href="#" class="text-white text-decoration-none me-3">Services</a>
        <a href="#" class="text-white text-decoration-none">Kontakt</a>
    </div>
    
    <!-- Login rechts -->
    <div class="d-flex align-items-center">
        <button class="btn btn-outline-light btn-sm me-2">Anmelden</button>
        <button class="btn btn-light btn-sm">Registrieren</button>
    </div>
</nav>

9.5.2 Card-Layout mit gleichen Höhen

<div class="row">
    <div class="col-md-4 d-flex">
        <div class="card h-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Kurzer Titel</h5>
                <p class="card-text flex-grow-1">Kurzer Text.</p>
                <button class="btn btn-primary mt-auto">Action</button>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 d-flex">
        <div class="card h-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Sehr langer Titel der über mehrere Zeilen geht</h5>
                <p class="card-text flex-grow-1">Sehr viel längerer Text, der diese Card höher macht als die anderen, aber durch Flexbox werden alle gleich hoch.</p>
                <button class="btn btn-primary mt-auto">Action</button>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 d-flex">
        <div class="card h-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Mittlerer Titel</h5>
                <p class="card-text flex-grow-1">Mittellanger Text.</p>
                <button class="btn btn-primary mt-auto">Action</button>
            </div>
        </div>
    </div>
</div>

9.5.3 Sticky Footer mit Flexbox

<!-- HTML-Struktur -->
<body class="d-flex flex-column min-vh-100">
    <header class="bg-primary text-white p-3">
        <h1>Header</h1>
    </header>
    
    <main class="flex-grow-1 container py-4">
        <h2>Hauptinhalt</h2>
        <p>Egal wie wenig Inhalt hier steht, der Footer bleibt unten.</p>
    </main>
    
    <footer class="bg-dark text-white p-3">
        <p class="mb-0">Footer bleibt am Boden</p>
    </footer>
</body>

9.5.4 Responsive Sidebar-Layout

<div class="d-flex">
    <!-- Sidebar -->
    <div class="d-none d-lg-flex flex-column bg-dark text-white" style="width: 250px; min-height: 100vh;">
        <div class="p-3">
            <h4>Navigation</h4>
        </div>
        <nav class="flex-grow-1 p-3">
            <a href="#" class="d-block text-white text-decoration-none py-2">Dashboard</a>
            <a href="#" class="d-block text-white text-decoration-none py-2">Benutzer</a>
            <a href="#" class="d-block text-white text-decoration-none py-2">Einstellungen</a>
        </nav>
    </div>
    
    <!-- Hauptinhalt -->
    <div class="flex-grow-1">
        <header class="bg-light p-3 border-bottom">
            <h2>Dashboard</h2>
        </header>
        <main class="p-4">
            <p>Hauptinhalt, der sich an den verfügbaren Platz anpasst.</p>
        </main>
    </div>
</div>

9.5.5 Form-Layout mit Flexbox

<form>
    <!-- Horizontale Eingabegruppe -->
    <div class="d-flex mb-3">
        <div class="flex-grow-1 me-2">
            <label class="form-label">Vorname</label>
            <input type="text" class="form-control">
        </div>
        <div class="flex-grow-1">
            <label class="form-label">Nachname</label>
            <input type="text" class="form-control">
        </div>
    </div>
    
    <!-- Eingabe mit Button -->
    <div class="d-flex mb-3">
        <div class="flex-grow-1 me-2">
            <label class="form-label">E-Mail</label>
            <input type="email" class="form-control">
        </div>
        <div class="align-self-end">
            <button class="btn btn-outline-secondary">Prüfen</button>
        </div>
    </div>
    
    <!-- Button-Gruppe -->
    <div class="d-flex justify-content-end">
        <button type="button" class="btn btn-secondary me-2">Abbrechen</button>
        <button type="submit" class="btn btn-primary">Speichern</button>
    </div>
</form>

9.5.6 Media Object Pattern

<div class="d-flex mb-3">
    <div class="flex-shrink-0">
        <div class="bg-secondary rounded-circle" style="width: 50px; height: 50px;"></div>
    </div>
    <div class="flex-grow-1 ms-3">
        <h6 class="mb-1">Max Mustermann</h6>
        <p class="mb-1">Das ist ein Kommentar, der sich über mehrere Zeilen erstrecken kann, während das Avatar-Bild immer oben bleibt.</p>
        <small class="text-muted">vor 2 Stunden</small>
    </div>
</div>

<div class="d-flex">
    <div class="flex-shrink-0">
        <div class="bg-primary rounded-circle" style="width: 50px; height: 50px;"></div>
    </div>
    <div class="flex-grow-1 ms-3">
        <h6 class="mb-1">Anna Schmidt</h6>
        <p class="mb-1">Kurzer Kommentar.</p>
        <small class="text-muted">vor 1 Stunde</small>
    </div>
</div>

9.6 Flexbox-Performance und Best Practices

Flexbox ist performant und modern unterstützt, aber es gibt einige Punkte zu beachten:

Flexbox in Bootstrap macht moderne Layouts zugänglich und intuitiv. Die Kombination aus CSS-Power und Bootstrap-Einfachheit ermöglicht es, praktisch jedes Layout-Problem elegant zu lösen.

9 Responsive Layout mit Flexbox

9.1 Flexbox-Utilities in Bootstrap