Wofür wird Flexbox verwendet?

Flexbox wird verwendet, um flexible und adaptive Layouts in CSS zu erstellen. Es ermöglicht eine einfache Ausrichtung und Verteilung der Elemente innerhalb des Containers, wobei deren Größe und Position automatisch an den verfügbaren Raum angepasst werden.

Grundkonzepte von Flexbox:

• Flex-Container: Element, auf das display: flex; oder display: inline-flex; angewendet wird. Es enthält Flex-Elemente.
• Flex-Elemente: Direkte Nachkommen des Flex-Containers.

Flexbox ermöglicht die Kontrolle über:

• Die Richtung der Anordnung der Elemente (flex-direction).
• Das Umbruchverhalten der Elemente auf die nächste Zeile/Spalte (flex-wrap).
• Die Ausrichtung der Elemente entlang der Hauptachse (justify-content).
• Die Ausrichtung der Elemente entlang der Querachse (align-items für einzelne Elemente und align-content für mehrere Zeilen/Spalten).
• Die Reihenfolge der Anzeige der Elemente (order).
• Die Verteilung des freien Raums zwischen den Elementen (flex-grow, flex-shrink, flex-basis).

Beispiel für die Grundnutzung:

.kontainer {
  display: flex;
  justify-content: center; /* Zentrierung horizontal */
  align-items: center; /* Zentrierung vertikal */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="kontainer">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>