====== CSS Layout mit Flexbox ======

Diese Dokumentation erläutert die Grundlagen, Ausrichtungen und Eigenschaften des CSS Flexbox-Layoutmodus basierend auf dem Referenzmaterial[cite: 11].

===== 1. Über Flexbox & Behälter =====

Flexbox ist ein Anzeigemodus, der Elemente entlang einer Achse (horizontal oder vertikal) anordnet[cite: 11]. Er eignet sich besonders für Komponenten wie Menüs, Galerien und responsive Seitenlayouts[cite: 11].

==== Aktivierung ====
Um den Flexbox-Modus zu aktivieren, wird die Eigenschaft ''display: flex;'' auf das Eltern-Element angewendet[cite: 11]. 
  * Der Eltern-Container wird zum **Flex-Container**[cite: 11].
  * Alle direkten untergeordneten Elemente werden zu **Flex-Elementen** (Flex Items)[cite: 11].

<code css>
.container {
  display: flex;
}
</code>

===== 2. Flussrichtung & Umbruch =====

==== flex-direction ====
Bestimmt die Hauptrichtung, in der die Flex-Elemente angeordnet werden[cite: 11]:
  * ''row'' — Horizontal von links nach rechts (Standard)[cite: 11].
  * ''row-reverse'' — Horizontal von rechts nach links[cite: 11].
  * ''column'' — Vertikal von oben nach unten[cite: 11].
  * ''column-reverse'' — Vertikal von unten nach oben[cite: 11].

==== flex-wrap ====
Steuert, ob Elemente bei Platzmangel in neue Zeilen umbrechen[cite: 11]:
  * ''nowrap'' — Alle Elemente bleiben auf einer Zeile (Standard; kann zu Stauchung oder Überlauf führen)[cite: 11].
  * ''wrap'' — Elemente brechen bei Bedarf auf mehrere Zeilen um[cite: 11].
  * ''wrap-reverse'' — Elemente brechen in umgekehrter Richtung um[cite: 11].

==== flex-flow ====
Kurzschreibweise für ''flex-direction'' und ''flex-wrap'' in einer Deklaration[cite: 11].

<code css>
.container {
  display: flex;
  flex-flow: column wrap; /* Spaltenanordnung mit Umbruch */
}
</code>

===== 3. Achsen-Konzept =====

Flexbox arbeitet richtungsunabhängig mit zwei Achsen[cite: 11]:
  * **Hauptachse (Main Axis):** Verläuft entlang der eingestellten Strömungsrichtung (bei ''row'' horizontal, bei ''column'' vertikal)[cite: 11].
  * **Querachse (Cross Axis):** Verläuft senkrecht zur Hauptachse[cite: 11].

===== 4. Ausrichtung =====

==== Hauptachse: justify-content ====
Richtet die Elemente entlang der Hauptachse aus (wird auf den Container angewendet)[cite: 11]:
  * ''flex-start'' — Elemente werden am Anfang der Hauptachse ausgerichtet (Standard)[cite: 11].
  * ''flex-end'' — Elemente werden am Ende der Hauptachse ausgerichtet[cite: 11].
  * ''center'' — Zentriert die Elemente auf der Hauptachse[cite: 11].
  * ''space-between'' — Gleichmäßige Verteilung; erstes Element am Anfang, letztes am Ende[cite: 11].
  * ''space-around'' — Gleichmäßiger Abstand um alle Elemente herum[cite: 11].

==== Querachse: align-items & align-self ====
  * **align-items (Container):** Richtet alle Elemente entlang der Querachse aus (Werte: ''stretch'' [Standard], ''flex-start'', ''flex-end'', ''center'', ''baseline'')[cite: 11].
  * **align-self (Element):** Überschreibt ''align-items'' für ein einzelnes Flex-Element[cite: 11].

==== Mehrzeilige Querachse: align-content ====
Steuert die Ausrichtung der Zeilen auf der Querachse, wenn ''flex-wrap: wrap;'' aktiv ist und zusätzlicher Platz vorhanden ist[cite: 11] (Werte: ''stretch'' [Standard], ''flex-start'', ''flex-end'', ''center'', ''space-between'', ''space-around'')[cite: 11].

===== 5. Flexibilität der Elemente (flex, grow, shrink, basis) =====

Die Eigenschaft ''flex'' ist eine Kurzform für ''flex-grow'', ''flex-shrink'' und ''flex-basis'' zur Verteilung des verbleibenden Raums[cite: 11].

==== Einzelne Eigenschaften ====
  * **flex-grow:** Zahl, die bestimmt, wie stark ein Element im Verhältnis zu anderen wachsen darf (0 = kein Wachstum)[cite: 11].
  * **flex-shrink:** Bestimmt, wie stark ein Element bei Platzmangel schrumpfen darf[cite: 11].
  * **flex-basis:** Gibt die Grundgröße des Elements vor Verteilung des Restraums an[cite: 11].

==== Vordefinierte Kurzwerte ====
  * ''flex: initial;'' (entspricht ''0 1 auto'') — Wächst nicht, kann schrumpfen[cite: 11].
  * ''flex: auto;'' (entspricht ''1 1 auto'') — Vollständig flexibel[cite: 11].
  * ''flex: none;'' (entspricht ''0 0 auto'') — Vollständig starr[cite: 11].

<code css>
/* Beispiel für flexibles Wachstum */
.item-groß {
  flex: 3 1 auto; /* Erhält dreimal mehr freien Zusatzraum als Standard-Items */
}
</code>

===== 6. Reihenfolge ändern (order) =====

Die Eigenschaft ''order'' steuert die visuelle Reihenfolge von Flex-Elementen unabhängig von ihrer Reihenfolge im HTML-Quelltext[cite: 11].
  * **Standardwert:** ''0''[cite: 11]
  * Elemente werden aufsteigend nach ihrem Wertsortiert[cite: 11].
  * Elemente mit demselben Wert bilden eine Ordinalgruppe und behalten ihre Quellcode-Reihenfolge bei[cite: 11].

<code css>
.box-letzte {
  order: 1; /* Wandert ans Ende, wenn andere den Standardwert 0 haben */
}
</code>

===== 7. Übersicht der Flexbox-Eigenschaften =====

^ Container-Eigenschaften (Flex Container) ^ Element-Eigenschaften (Flex Items) ^
| ''display''[cite: 11] | ''flex''[cite: 11] |
| ''flex-direction''[cite: 11] | ''flex-grow''[cite: 11] |
| ''flex-wrap''[cite: 11] | ''flex-shrink''[cite: 11] |
| ''flex-flow''[cite: 11] | ''flex-basis''[cite: 11] |
| ''justify-content''[cite: 11] | ''align-self''[cite: 11] |
| ''align-items''[cite: 11] | ''order''[cite: 11] |
| ''align-content''[cite: 11] | |