Was ist Flexbox?

Flexbox (Flexibles Box-Layout) ist ein eindimensionales Layout-Modell in CSS, das dazu dient, den Raum zwischen Elementen in einem Container zu verteilen und leistungsstarke Ausrichtungsfunktionen bereitzustellen. Es ermöglicht eine einfache Steuerung der Größen, Reihenfolge und Ausrichtung der Kind-Elemente (Flex-Elemente) innerhalb des Eltern-Containers (Flex-Container), unabhängig von ihrer ursprünglichen Reihenfolge oder Größe.

Wichtige Konzepte von Flexbox:

• Flex-Container: Element mit display: flex oder display: inline-flex. Hier werden die Layout-Regeln für die direkten Kind-Elemente festgelegt.
• Flex-Elemente: Direkte Kind-Elemente des Flex-Containers. Es werden Flexbox-Eigenschaften angewendet, die ihr Verhalten im Container bestimmen.
• Hauptachse (main axis): Achse, entlang der die Flex-Elemente angeordnet werden. Standardmäßig horizontal (von links nach rechts), kann aber mit flex-direction geändert werden.
• Querachse (cross axis): Achse, die senkrecht zur Hauptachse steht.
• Hauptstart (main start) / Hauptende (main end): Anfang und Ende entlang der Hauptachse.
• Querstart (cross start) / Querende (cross end): Anfang und Ende entlang der Querachse.

Wichtige Eigenschaften von Flexbox für den Flex-Container:

• display: Bestimmt, dass das Element ein Flex-Container ist (flex oder inline-flex).
• flex-direction: Bestimmt die Richtung der Hauptachse (row, row-reverse, column, column-reverse).
• flex-wrap: Bestimmt, ob Flex-Elemente in eine neue Zeile/Spalte umgebrochen werden, wenn nicht genug Platz ist (nowrap, wrap, wrap-reverse).
• justify-content: Richtet die Flex-Elemente entlang der Hauptachse aus (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Richtet die Flex-Elemente entlang der Querachse aus (flex-start, flex-end, center, baseline, stretch).
• align-content: Richtet die Linien der Flex-Elemente (falls mehrere durch flex-wrap) entlang der Querachse aus.

Wichtige Eigenschaften von Flexbox für die Flex-Elemente:

• order: Bestimmt die Anzeigereihenfolge des Flex-Elements (Standard 0).
• flex-grow: Wachstumsfaktor des Flex-Elements, der bestimmt, wie sehr es wachsen kann, um den verfügbaren Raum zu füllen.
• flex-shrink: Schrumpffaktor des Flex-Elements, der bestimmt, wie sehr es schrumpfen kann, um Überlauf zu vermeiden.
• flex-basis: Anfangsgröße des Flex-Elements vor der Verteilung des freien Raums.
• flex: Kurzform für flex-grow, flex-shrink und flex-basis.
• align-self: Überschreibt align-items für ein bestimmtes Flex-Element.

Beispiel:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Macht den Container flexibel */
  justify-content: center; /* Zentriert die Elemente entlang der Hauptachse */
  align-items: center; /* Zentriert die Elemente entlang der Querachse */
  height: 200px; /* Für Demonstrationszwecke */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Hauptvorteile von Flexbox:

• Einfache Ausrichtung der Elemente horizontal und vertikal.
• Flexible Verteilung des Raums zwischen den Elementen.
• Einfaches Ändern der Reihenfolge der Elemente.
• Responsives Design ohne Float und Position.
• Gute Unterstützung in modernen Browsern.