Kostenlose Tutorials für Anfänger

Appearance

Kapitel 13: Flexbox (Flexibles Layout) ​

Willkommen bei Flexbox! Dies ist die modernste und einfachste Methode, um Layouts zu erstellen. Wenn Sie nur eine Layout-Methode lernen können, dann sollten Sie Flexbox lernen!

13.1 Definition von Flexbox: Flex-Container + Flex-Items ​

Flexbox ist ein eindimensionales Layout-Modell (entweder horizontaler oder vertikaler Richtung). Es besteht aus:

  1. Flex-Container: Das Elternelement (mit display: flex;)
  2. Flex-Items: Die Kind-Elemente innerhalb des Containers

📦 Analogie: Regale im Supermarkt ​

Stellen Sie sich einen Flex-Container wie ein Regal vor:

  • Das Regal (Container) hat Fächer (Flex-Items)
  • Sie können steuern:
    • Richtung: Fächer nebeneinander (horizontal) oder übereinander (vertikal)?
    • Ausrichtung: Fächer links, zentriert oder rechts?
    • Abstand: Viel Platz zwischen Fächern oder wenig?
    • Umbruch: Fächer in die nächste Zeile, wenn kein Platz mehr?

13.2 Flexbox aktivieren: display: flex; ​

Um Flexbox zu aktivieren, müssen Sie dem Container (display: flex;) zuweisen.

📝 Syntax ​

css
.container {
    display: flex; /* Flex-Container aktivieren! */
}

🎯 Beispiel ​

HTML:

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

CSS:

css
.container {
    display: flex; /* Flex-Container aktivieren! */
    background-color: #f0f0f0;
    padding: 20px;
}

.item {
    background-color: #3366cc;
    color: white;
    padding: 20px;
    margin: 5px;
}

Ergebnis: Die drei .item-Elemente ordnen sich nebeneinander an (statt übereinander wie bei normalem Block-Layout)!

13.3 Container-Eigenschaften (Wie Items angeordnet werden) ​

Diese Eigenschaften werden auf den Flex-Container angewendet.

1. flex-direction: Richtung der Items ​

Legt fest, in welche Richtung die Flex-Items angeordnet werden.

Mögliche Werte:

  • row (Standard): Horizontal von links nach rechts
  • row-reverse: Horizontal von rechts nach links
  • column: Vertikal von oben nach unten
  • column-reverse: Vertikal von unten nach oben

Beispiel:

css
.container {
    display: flex;
    flex-direction: row; /* Standard, von links nach rechts */
}

/* Items untereinander anordnen */
.container-vertical {
    display: flex;
    flex-direction: column; /* Vertikal, von oben nach unten */
}

2. justify-content: Horizontale Ausrichtung (Hauptachse) ​

Legt fest, wie die Flex-Items auf der Hauptachse (horizontal bei row) ausgerichtet werden.

Mögliche Werte:

  • flex-start (Standard): Am Anfang (links)
  • flex-end: Am Ende (rechts)
  • center: Zentriert
  • space-between: Gleichmäßiger Abstand zwischen den Items (erstes und letztes Item an den Rändern)
  • space-around: Gleichmäßiger Abstand um die Items herum
  • space-evenly: Gleichmäßiger Abstand zwischen allen Items

Beispiel:

css
/* Items zentrieren (sehr häufig verwendet!) */
.container {
    display: flex;
    justify-content: center;
}

/* Items mit gleichem Abstand verteilen */
.container {
    display: flex;
    justify-content: space-between;
}

3. align-items: Vertikale Ausrichtung (Querachse) ​

Legt fest, wie die Flex-Items auf der Querachse (vertikal bei row) ausgerichtet werden.

Mögliche Werte:

  • stretch (Standard): Items dehnen sich auf die volle Höhe aus
  • flex-start: Am Anfang (oben)
  • flex-end: Am Ende (unten)
  • center: Zentriert
  • baseline: An der Text-Basislinie ausgerichtet

Beispiel:

css
/* Items vertikal zentrieren (sehr häufig verwendet!) */
.container {
    display: flex;
    height: 200px; /* Wichtig: Container muss eine Höhe haben! */
    align-items: center;
}

/* Items am oberen Rand ausrichten */
.container {
    display: flex;
    align-items: flex-start;
}

4. flex-wrap: Umbruch erlauben ​

Legt fest, ob die Flex-Items in die nächste Zeile umbrechen dürfen, wenn kein Platz mehr vorhanden ist.

Mögliche Werte:

  • nowrap (Standard): Kein Umbruch (Items werden verkleinert)
  • wrap: Umbruch erlauben
  • wrap-reverse: Umbruch in umgekehrter Richtung

Beispiel:

css
/* Items umbrechen lassen (responsive!) */
.container {
    display: flex;
    flex-wrap: wrap;
}

13.4 Item-Eigenschaften (Wie einzelne Items gesteuert werden) ​

Diese Eigenschaften werden auf die Flex-Items (Kind-Elemente) angewendet.

1. flex: Verhältnis des Items (Wachstum, Schrumpfung, Basis) ​

Dies ist die wichtigste Eigenschaft für Flex-Items! Sie ist eine Kurzschreibweise für:

  • flex-grow: Wie viel der Item wachsen darf (Platz aufnehmen)
  • flex-shrink: Wie viel der Item schrumpfen darf
  • flex-basis: Ausgangsgröße des Items

Beispiel:

css
/* Item nimmt allen verfügbaren Platz ein */
.item-grow {
    flex: 1; /* Enspricht: flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

/* Zweites Item nimmt doppelt so viel Platz ein wie das erste */
.item-double {
    flex: 2;
}

/* Item hat eine feste Breite (200px) */
.item-fixed {
    flex: 0 0 200px; /* Wächst nicht, schrumpft nicht, Basis: 200px */
}

2. align-self: Einzelnes Item vertikal ausrichten ​

Überschreibt align-items für ein einzelnes Item.

Beispiel:

css
/* Ein Item am unteren Rand ausrichten, obwohl andere zentriert sind */
.item-bottom {
    align-self: flex-end;
}

13.5 Anfänger-Tipps: Häufige Flexbox-Szenarien ​

🌟 Szenario 1: Elemente zentrieren ( horizontal + vertikal) ​

Dies ist der häufigste Anwendungsfall für Flexbox!

css
.container {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    height: 200px;         /* Wichtig für vertikale Zentrierung! */
}

🌟 Szenario 2: Navigationsleiste erstellen ​

css
.nav {
    display: flex;
    justify-content: space-between; /* Logo links, Links rechts */
    align-items: center;        /* Vertikal zentrieren */
    padding: 20px;
    background-color: #333333;
}

.nav-links {
    display: flex;
    gap: 20px; /* Abstand zwischen den Links (moderne Methode statt margin!) */
}

🌟 Szenario 3: Kartenlayout (responsive) ​

css
.card-container {
    display: flex;
    flex-wrap: wrap;      /* Umbruch erlauben */
    gap: 20px;            /* Abstand zwischen den Karten */
}

.card {
    flex: 1 1 300px;     /* Wächst und schrumpft, Basis: 300px */
    /* Enspricht: flex-grow: 1; flex-shrink: 1; flex-basis: 300px; */
}

13.6 Praxis: Responsive Navigationsleiste, Produktkartenliste ​

Lassen Sie uns das Gelernte in praktischen Beispielen anwenden!

🎯 Beispiel 1: Responsive Navigationsleiste ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Navigation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="main-nav">
        <div class="logo">Meine Webseite</div>
        <ul class="nav-links">
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Dienstleistungen</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Navigationsleiste */
.main-nav {
    display: flex;
    justify-content: space-between; /* Logo links, Links rechts */
    align-items: center;            /* Vertikal zentrieren */
    padding: 20px 40px;
    background-color: #333333;
    color: white;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    display: flex;
    list-style-type: none;
    gap: 20px; /* Abstand zwischen den Links */
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #4CAF50;
}

/* Responsive Anpassung für Handys */
@media (max-width: 768px) {
    .main-nav {
        flex-direction: column; /* Untereinander anordnen */
        text-align: center;
    }
    
    .nav-links {
        margin-top: 20px;
        flex-direction: column; /* Untereinander anordnen */
        gap: 10px;
    }
}

🎯 Beispiel 2: Produktkartenliste ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Produktkarten</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h3>Produkt 1</h3>
            <p>Beschreibung für Produkt 1.</p>
            <button>Kaufen</button>
        </div>
        
        <div class="card">
            <h3>Produkt 2</h3>
            <p>Beschreibung für Produkt 2.</p>
            <button>Kaufen</button>
        </div>
        
        <div class="card">
            <h3>Produkt 3</h3>
            <p>Beschreibung für Produkt 3.</p>
            <button>Kaufen</button>
        </div>
    </div>
</body>
</html>

CSS (style.css):

css
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* Karten-Container */
.card-container {
    display: flex;
    flex-wrap: wrap;      /* Umbruch erlauben */
    gap: 20px;            /* Abstand zwischen den Karten */
    max-width: 1200px;
    margin: 0 auto;
}

/* Einzelne Karte */
.card {
    flex: 1 1 300px;     /* Wächst und schrumpft, Basis: 300px */
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Inhalt untereinander */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für Karten */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: #333333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card p {
    color: #666666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein (drückt den Button nach unten) */
}

.card button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.card button:hover {
    background-color: #45a049;
}

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Was Flexbox ist (Flex-Container + Flex-Items)
  • ✅ Wie man Flexbox aktiviert (display: flex;)
  • ✅ Container-Eigenschaften (flex-direction, justify-content, align-items, flex-wrap)
  • ✅ Item-Eigenschaften (flex, align-self)
  • ✅ Häufige Flexbox-Szenarien (Zentrieren, Navigation, Kartenlayout)
  • ✅ Praktische Beispiele: Responsive Navigationsleiste, Produktkartenliste

🎯 Nächste Schritte ​

Im nächsten Kapitel werden wir:

  1. Grid-Layout erlernen (zweidimensionales Layout)
  2. Grid-Container- und Item-Eigenschaften üben
  3. Praktische Projekte zur Seitenlayouts und Fotogalerien erstellen

Bereit für mehr? Los geht's! 🎨

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials