Aufgabe A11

Flexbox aktivierst du mit display: flex auf einem Container-Element. Alle direkten Kinder werden dann zu „Flex-Items" und richten sich nebeneinander aus:

Mit flex-wrap: wrap dürfen Items in die nächste Zeile umbrechen, wenn der Platz nicht reicht:

Teil A – Navigation horizontal

Die Navigation auf deinen Seiten besteht aus einem <nav> mit einer <ul>. Standardmäßig sind Listen vertikal. Mit Flexbox werden sie horizontal:

nav ul {
    display: flex;
    list-style: none;   /* Punkte entfernen */
    margin: 0;
    padding: 0;
    gap: 0.5em;         /* Abstand zwischen den Links */
}

nav a {
    display: block;
    padding: 0.4em 0.8em;
}

Wende das auf alle deine Seiten an. Die Navigation soll jetzt horizontal verlaufen.

Teil B – Elementkarten auf der Startseite

Die vier Elemente auf der Startseite sollen als nebeneinanderliegende Karten angezeigt werden. So soll das Ergebnis ungefähr aussehen:

🔥

Feuer

🪨

Erde

💨

Luft

💧

Wasser

Strukturiere die vier Elemente in index.html so:

<div class="elemente">
    <div class="element-karte feuer">
        <p class="emoji">🔥</p>
        <h2>Feuer</h2>
        <p>Kurze Beschreibung …</p>
        <a href="feuer.html">Mehr lesen</a>
    </div>
    <!-- Erde, Luft, Wasser analog … -->
</div>

Und in CSS:

.elemente {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-top: 2em;
}

.element-karte {
    flex: 1;
    min-width: 150px;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1em;
    text-align: center;
}

/* Individuelle Farben für jede Karte */
.feuer  { border-color: #e74c3c; background: #fdf0ed; }
.erde   { border-color: #7d6608; background: #fdf9ed; }
.luft   { border-color: #5d6d7e; background: #edf5fb; }
.wasser { border-color: #1a6699; background: #eaf4fb; }

Teil C – Bilder und Text nebeneinander (wasser.html)

Auf der Wasser-Seite: Bild links, Text rechts – mit Flexbox:

.bild-text {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

.bild-text img {
    width: 220px;
    flex-shrink: 0;  /* Bild darf nicht kleiner werden */
}

<div class="bild-text">
    <img src="bilder/wasser1.jpg" alt="…">
    <div>
        <h2>Wasser im Alltag</h2>
        <p>…</p>
    </div>
</div>

💡 Die wichtigsten Flexbox-Eigenschaften:
display: flex – Flexbox aktivieren
flex-direction: row | column – Richtung (Standard: row = horizontal)
justify-content: flex-start | center | space-between | space-around – horizontale Ausrichtung
align-items: flex-start | center | flex-end | stretch – vertikale Ausrichtung
flex-wrap: wrap – Items dürfen umbrechen
gap: 1em – Abstand zwischen Items

A11 – Flexbox: Navigation & Startseite layouten

Flexbox kurz erklärt

Aufgabe A11

Teil A – Navigation horizontal

Teil B – Elementkarten auf der Startseite

Teil C – Bilder und Text nebeneinander (wasser.html)