it-praxisportal/courses/html_css/09_flexbox_achsen_und_alignment

CSS 09: Flexbox Achsen, Justify & Align (1D-Layouts)

Willkommen im 3. Lehrpfad! In diesem Modul lernst du das Flexible Box Layout (Flexbox) kennen. Flexbox ist der moderne Standard für eindimensionale Layouts (Reihen oder Spalten) im Web.

---

🎯 Lernziele

1. Flex-Container & Achsen verstehen: Hauptachse (Main Axis) vs. Querachse (Cross Axis).
2. Ausrichtung steuern: justify-content (Hauptachse) und align-items / align-self (Querachse).
3. Umbruch & Abstände: flex-wrap: wrap und moderner gap-Abstand.
4. Item-Verhalten berechnen: flex-grow, flex-shrink und flex-basis (Kurzform flex: 1 1 280px).
5. Praxisnahe UIs bauen: Responsive Navigationsleisten und flexible Kartengitter.

---

🧠 Die Kernkonzepte im Detail

1. Das Achsensystem von Flexbox

Ein Element wird zum Flex-Container durch:

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

• flex-direction: row: Hauptachse ist horizontal (links nach rechts). Querachse ist vertikal (oben nach unten).
• flex-direction: column: Hauptachse ist vertikal (oben nach unten). Querachse ist horizontal (links nach rechts).

---

2. Ausrichtung auf der Hauptachse (justify-content)

justify-content steuert, wie überschüssiger Platz entlang der Hauptachse verteilt wird:

Wert	Wirkung
flex-start	Elemente linksbündig / am Anfang der Achse
center	Elemente horizontal zentriert
flex-end	Elemente rechtsbündig / am Ende der Achse
space-between	Erstes Item ganz links, letztes ganz rechts, Zwischenräume gleichmäßig verteilt
space-around	Gleichmäßiger Abstand um jedes Element herum
space-evenly	Exakt gleicher Abstand zwischen allen Elementen und den Rändern

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

---

3. Ausrichtung auf der Querachse (align-items & align-self)

align-items bestimmt die Ausrichtung aller Kindelemente entlang der Querachse:

• stretch (Standard): Elemente dehnen sich auf volle Containerhöhe aus.
• center: Elemente werden auf der Querachse mittig zentriert.
• flex-start: Am oberen Rand ausgerichtet.
• flex-end: Am unteren Rand ausgerichtet.
• baseline: An der Text-Grundlinie ausgerichtet.

Ein einzelnes Item kann diese Regel mit align-self überschreiben:

.badge-special {
  align-self: flex-start;
}

---

4. Flex-Wrap und Gap

Standardmäßig quetscht Flexbox alle Elemente in eine einzige Zeile (flex-wrap: nowrap). Mit flex-wrap: wrap dürfen Elemente umbrechen:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* Gleichmäßiger Abstand zwischen Zeilen und Spalten */
}

---

5. Flex-Item Wachstumslogik (flex: grow shrink basis)

Jedes Kind-Element kann steuern, wie es bei Platzmangel schrumpft oder bei Platzüberschuss wächst:

• flex-grow: 1: Nimmt anteilig freien Platz ein.
• flex-shrink: 1: Darf bei Platzmangel schrumpfen.
• flex-basis: 280px: Ideale Startbreite vor dem Wachsen/Schrumpfen.

Kurzschreibweise:

.card {
  flex: 1 1 280px; /* grow shrink basis */
}

---

🎯 Aufgabenstellung in aufgabe.html

Vervollständige die Stylesheet-Regeln in aufgabe.html:

• TEILZIEL 1: Stylinge .navbar als Flex-Container mit justify-content: space-between und align-items: center.
• TEILZIEL 2: Stylinge .nav-links als horizontale Flex-Liste mit gap: 20px, align-items: center und ohne Aufzählungszeichen.
• TEILZIEL 3: Stylinge .card-container mit display: flex, flex-wrap: wrap und gap: 24px.
• TEILZIEL 4: Setze für .flex-card die Kurzform flex: 1 1 280px und inneres Flex-Spaltenlayout (flex-direction: column, justify-content: space-between).
• TEILZIEL 5: Richte das Badge .card__badge mit align-self: flex-start oben links aus.

Teste deinen Code mit test_aufgabe.js oder direkt im Web-Workspace!