Ako nastaviť vlastnosti flexboxu?

Vlastnosti sa nastavujú pre kontajner (prvok, na ktorý sa aplikuje display: flex alebo display: inline-flex) a jeho priame potomky (prvky vo vnútri kontajnera).

Vlastnosti pre kontajner:

display: Určuje, že prvok je flex kontajner. Možné hodnoty: flex (blokový) a inline-flex (riadok).
flex-direction: Určuje smer hlavnej osi, pozdĺž ktorej sú rozmiestnené flex prvky. Možné hodnoty: row (predvolené, sprava doľava), row-reverse (zľava doprava), column (zhora nadol), column-reverse (zdola nahor).
flex-wrap: Riadi presun flex prvkov na nový riadok, ak presahujú hranice kontajnera. Možné hodnoty: nowrap (predvolené, bez presunu), wrap (presun na nový riadok), wrap-reverse (obrátený presun na nový riadok).
justify-content: Zarovnáva flex prvky pozdĺž hlavnej osi. Možné hodnoty: flex-start (začiatok kontajnera), flex-end (koniec kontajnera), center, space-between (rovnomerne rozložený priestor medzi prvkami, prvý na začiatku, posledný na konci), space-around (rovnomerne rozložený priestor okolo každého prvku).
align-items: Zarovnáva flex prvky pozdĺž kolmej osi. Možné hodnoty: stretch (predvolené, natiahne prvky na výšku kontajnera), flex-start (začiatok), flex-end (koniec), center, baseline (zarovnanie podľa základnej línie textu).
align-content: Zarovnáva riadky flex prvkov pozdĺž kolmej osi (keď sa používa flex-wrap). Neplatí, ak je iba jeden riadok. Možné hodnoty: stretch, flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Určujú vzdialenosť medzi flex prvkami pozdĺž hlavných a kolmé osí.

Vlastnosti pre prvky (priame potomky flex kontajnera):

order: Určuje poradie usporiadania prvku v kontajneri. Predvolene majú všetky prvky order: 0. Prvky s nižšou hodnotou order sa zobrazia skôr.
flex-grow: Určuje, o koľko krát sa môže prvok zväčšiť v porovnaní s ostatnými prvkami, ak je voľný priestor. Predvolené 0 (neväčší sa).
flex-shrink: Určuje, o koľko krát sa môže prvok zmenšiť, ak nie je dostatok miesta. Predvolené 1 (zmenší sa).
flex-basis: Určuje počiatočnú veľkosť prvku pred rozdelením voľného priestoru. Môže byť v pixeloch, percentách alebo auto. Predvolené auto.
flex: Skrátená vlastnosť pre flex-grow, flex-shrink a flex-basis. Napríklad, flex: 1 1 auto;.
align-self: Prepíše hodnotu align-items pre tento konkrétny prvok. Možné hodnoty: auto, stretch, flex-start, flex-end, center, baseline.

Príklad:

.flex-container {
  display: flex; /* Urobí prvok flex kontajnerom */
  flex-direction: row; /* Usporiada prvky do radu */
  justify-content: center; /* Zarovná prvky na stred hlavnej osi */
  align-items: center; /* Zarovná prvky na stred kolmej osi */
  gap: 10px; /* Nastaví vzdialenosť medzi prvkami */
}

.flex-item {
  flex-grow: 1; /* Prvok sa môže zväčšiť */
  flex-basis: 100px; /* Počiatočná veľkosť prvku */
}

.special-item {
  order: -1; /* Tento prvok bude prvý */
  align-self: flex-end; /* Prepíše zarovnanie pre tento prvok */
}