Jak nastavit vlastnosti flexboxu?

Vlastnosti se nastavují pro kontejner (prvek, na který se aplikuje display: flex nebo display: inline-flex) a jeho přímé potomky (prvky uvnitř kontejneru).

Vlastnosti pro kontejner:

• display: Určuje, že prvek je flex kontejner. Možné hodnoty: flex (blokový) a inline-flex (řádkový).
• flex-direction: Určuje směr hlavní osy, podél které jsou rozmístěny flex prvky. Možné hodnoty: row (výchozí, zleva doprava), row-reverse ( zprava doleva), column (shora dolů), column-reverse (zdola nahoru).
• flex-wrap: Řídí přenos flex prvků na nový řádek, pokud přesahují hranice kontejneru. Možné hodnoty: nowrap (výchozí, bez přenosu), wrap (přenos na nový řádek), wrap-reverse (přenos v opačném pořadí).
• justify-content: Zarovnává flex prvky podél hlavní osy. Možné hodnoty: flex-start (začátek kontejneru), flex-end (konec kontejneru), center, space-between (rovnoměrný prostor mezi prvky, první u začátku, poslední u konce), space-around (rovnoměrný prostor kolem každého prvku).
• align-items: Zarovnává flex prvky podél kolmého (přesněji, příčného) směru. Možné hodnoty: stretch (výchozí, roztahuje prvky na výšku kontejneru), flex-start (začátek), flex-end (konec), center, baseline (zarovnání podle základní linie textu).
• align-content: Zarovnává řádky flex prvků podél kolmého směru (když je použit flex-wrap). Neplatí, pokud je pouze jedna řádka. Možné hodnoty: stretch, flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Určují vzdálenost mezi flex prvky podél hlavní a kolmých os.

Vlastnosti pro prvky (přímé potomky flex kontejneru):

• order: Určuje pořadí uspořádání prvku uvnitř kontejneru. Výchozí je 0. Prvky s menší hodnotou order jsou dříve.
• flex-grow: Určuje, o kolik krát se může prvek zvětšit vzhledem k ostatním prvkům, pokud je volný prostor. Výchozí 0 (nezvětšuje se).
• flex-shrink: Určuje, o kolik krát se může prvek zmenšit, pokud není dost místa. Výchozí 1 (zmenšuje se).
• flex-basis: Určuje počáteční velikost prvku před rozdělením volného prostoru. Může být v pixelech, procentech nebo auto. Výchozí auto.
• flex: Zkrácená vlastnost pro flex-grow, flex-shrink a flex-basis. Například flex: 1 1 auto;.
• align-self: Přepisuje hodnotu align-items pro tento konkrétní prvek. Možné hodnoty: auto, stretch, flex-start, flex-end, center, baseline.

Příklad:

.flex-container {
  display: flex; /* Dělá prvek flex kontejnerem */
  flex-direction: row; /* Uspořádá prvky do řady */
  justify-content: center; /* Zarovná prvky na střed hlavní osy */
  align-items: center; /* Zarovná prvky na střed kolmého směru */
  gap: 10px; /* Nastaví vzdálenost mezi prvky */
}

.flex-item {
  flex-grow: 1; /* Prvek se může zvětšovat */
  flex-basis: 100px; /* Počáteční velikost prvku */
}

.special-item {
  order: -1; /* Tento prvek bude první */
  align-self: flex-end; /* Přepisuje zarovnání pro tento prvek */
}