Wofür wird flex in CSS verwendet?

Flexbox wird verwendet, um eindimensionale Anordnungen von Elementen in einem Container zu erstellen. Es ermöglicht die Steuerung der Ausrichtung, der Raumverteilung und der Reihenfolge der Elemente.

Grundbegriffe:

• Flex-Container: Elternelement, dem display: flex oder display: inline-flex zugewiesen wird.
• Flex-Items: Kind-Elemente des Flex-Containers.
• Hauptachse: Hauptachse des Flex-Containers. Wird durch die Eigenschaft flex-direction bestimmt. Standardmäßig horizontal (row).
• Querachse: Senkrechte Achse zur Hauptachse.

Wichtige Eigenschaften für den Flex-Container:

• display: Bestimmt, dass das Element ein Flex-Container ist (flex oder inline-flex).
• flex-direction: Legt die Richtung der Hauptachse fest (row, row-reverse, column, column-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).
• flex-wrap: Bestimmt, ob die Flex-Elemente in eine neue Zeile/Spalte umbrechen, wenn nicht genug Platz vorhanden ist (nowrap, wrap, wrap-reverse).

Wichtige Eigenschaften für Flex-Items:

• order: Bestimmt die visuelle Reihenfolge des Flex-Elements (Standard 0).
• flex-grow: Bestimmt, wie sehr ein Flex-Element im Vergleich zu anderen wachsen kann (Standard 0).
• flex-shrink: Bestimmt, wie sehr ein Flex-Element im Vergleich zu anderen schrumpfen kann (Standard 1).
• flex-basis: Legt die Anfangsgröße des Flex-Elements vor der Verteilung des freien Raums fest (Standard auto).
• align-self: Überschreibt die Ausrichtung des Flex-Elements entlang der Querachse für ein einzelnes Element.

Beispiel:

.container {
  display: flex;
  justify-content: center; /* Zentriert entlang der Hauptachse */
  align-items: center; /* Zentriert entlang der Querachse */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Dies ermöglicht eine einfache Zentrierung der Elemente, die Erstellung anpassungsfähiger Raster und die Steuerung des Raums zwischen den Elementen.