Wie legt man die Eigenschaften von Flexbox fest…

Eigenschaften werden für den Container (das Element, auf das display: flex oder display: inline-flex angewendet wird) und seine direkten Nachkommen (die Elemente innerhalb des Containers) festgelegt.

Eigenschaften für den Container:

display: Bestimmt, dass das Element ein Flex-Container ist. Mögliche Werte: flex (Block) und inline-flex (Inline).
flex-direction: Legt die Richtung der Hauptrichtung fest, in der die Flex-Elemente angeordnet werden. Mögliche Werte: row (Standard, von links nach rechts), row-reverse (von rechts nach links), column (von oben nach unten), column-reverse (von unten nach oben).
flex-wrap: Steuert, ob die Flex-Elemente in eine neue Zeile umbrechen, wenn sie die Grenzen des Containers überschreiten. Mögliche Werte: nowrap (Standard, kein Umbruch), wrap (Umbruch in eine neue Zeile), wrap-reverse (Umbruch in umgekehrter Reihenfolge).
justify-content: Richtet die Flex-Elemente entlang der Hauptrichtung aus. Mögliche Werte: flex-start (Anfang des Containers), flex-end (Ende des Containers), center, space-between (gleichmäßiger Abstand zwischen den Elementen, erstes am Anfang, letztes am Ende), space-around (gleichmäßiger Abstand um jedes Element herum).
align-items: Richtet die Flex-Elemente entlang der Querrichtung aus. Mögliche Werte: stretch (Standard, streckt die Elemente auf die Höhe des Containers), flex-start (Anfang des Containers), flex-end (Ende des Containers), center, baseline (Ausrichtung an der Grundlinie des Textes).
align-content: Richtet die Zeilen der Flex-Elemente (bei Verwendung von flex-wrap) entlang der Querrichtung aus. Hat keine Wirkung, wenn nur eine Zeile vorhanden ist. Mögliche Werte: stretch (Standard), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Legen den Abstand zwischen den Flex-Elementen entlang der Haup- und Querrichtungen fest.

Eigenschaften für die Elemente (direkte Nachkommen des Flex-Containers):

order: Bestimmt die Anordnung des Elements innerhalb des Containers. Standardmäßig haben alle order: 0. Elemente mit kleinerem order-Wert werden vorgezogen.
flex-grow: Bestimmt, um wie viel das Element im Verhältnis zu anderen wachsen kann, wenn freier Raum vorhanden ist. Standard ist 0 (wächst nicht).
flex-shrink: Bestimmt, um wie viel das Element im Falle von Platzmangel verkleinert werden kann. Standard ist 1 (verringert sich).
flex-basis: Legt die Anfangsgröße des Elements vor der Verteilung des freien Raums fest. Kann in Pixeln, Prozenten oder auto angegeben werden. Standard ist auto.
flex: Kurzform für flex-grow, flex-shrink und flex-basis. Zum Beispiel flex: 1 1 auto;.
align-self: Überschreibt den Wert von align-items für ein einzelnes Element. Mögliche Werte: auto (verwendet den Wert von align-items des Elternteils), stretch, flex-start, flex-end, center, baseline.

Beispiel:

.flex-container {
  display: flex; /* Macht das Element zu einem Flex-Container */
  flex-direction: row; /* Anordnung der Elemente in einer Reihe */
  justify-content: center; /* Zentriert die Elemente entlang der Hauptrichtung */
  align-items: center; /* Zentriert die Elemente entlang der Querrichtung */
  gap: 10px; /* Legt den Abstand zwischen den Elementen fest */
}

.flex-item {
  flex-grow: 1; /* Das Element kann wachsen */
  flex-basis: 100px; /* Anfangsgröße des Elements */
}

.special-item {
  order: -1; /* Dieses Element wird zuerst platziert */
  align-self: flex-end; /* Überschreibt die Ausrichtung in der Querrichtung für dieses Element */
}

Wie legt man die Eigenschaften von Flexbox fest?