Jak používat flexbox pro rozvržení prvků na stránce…

Flexbox (nebo Flexible Box Layout) je CSS modul navržený pro vytváření flexibilních rozvržení prvků uvnitř kontejneru, umožňující snadné rozdělení prostoru a zarovnání prvků, i když jejich velikosti jsou neznámé nebo se dynamicky mění.

Hlavní koncept Flexboxu je flex-kontejner a jeho flex-prvky.

Vlastnosti pro flex-kontejner (display: flex;):

flex-direction: určuje směr, ve kterém jsou flex prvky umístěny (hlavní osa).
- row (výchozí): vodorovně, zleva doprava.
- row-reverse: vodorovně, zprava doleva.
- column: svisle, shora dolů.
- column-reverse: svisle, zdola nahoru.
flex-wrap: určuje, zda se flex prvky přesunou na novou řádku, pokud se nevejdou na jednu.
- nowrap (výchozí): všechny prvky na jedné řádce.
- wrap: přesunou se na novou řádku.
- wrap-reverse: přesunou se na novou řádku, ale v opačném pořadí.
justify-content: zarovnává flex prvky podél hlavní osy.
- flex-start (výchozí): na začátku hlavní osy.
- flex-end: na konci hlavní osy.
- center: uprostřed.
- space-between: rovnoměrné rozložení s mezerami mezi prvky.
- space-around: rovnoměrné rozložení s mezerami kolem prvků.
- space-evenly: rovnoměrné rozložení s rovnými mezerami mezi a kolem prvků.
align-items: zarovnává prvky podél kolmého (perpendikulárního) směru.
- stretch (výchozí, pokud prvky nemají definovanou výšku/šířku): roztahuje prvky podle výšky/šířky kolmého směru.
- flex-start: na začátku kolmého směru.
- flex-end: na konci kolmého směru.
- center: uprostřed.
- baseline: podle základní linie textu.
align-content: zarovnává řádky flex prvků podél kolmého směru, když je více řádků (flex-wrap: wrap). Funguje podobně jako justify-content, ale pro řádky.
- stretch (výchozí): roztahuje řádky.
- flex-start: na začátku.
- flex-end: na konci.
- center: uprostřed.
- space-between: rovnoměrné rozložení s mezerami mezi řádky.
- space-around: rovnoměrné rozložení s mezerami kolem řádků.
gap, row-gap, column-gap: nastavuje mezery mezi flex prvky.

.flex-container {
  display: flex; /* Vytvoří flex kontejner */
  flex-direction: row; /* Vodorovné uspořádání */
  flex-wrap: wrap; /* Přesun na nový řádek */
  justify-content: center; /* Zarovnání na střed */
  align-items: center; /* Vertikální zarovnání */
  gap: 10px; /* Mezery 10px */
}

Vlastnosti pro flex prvky (přímí potomci flex-kontejneru):

order: určuje pořadí zobrazení prvku v kontejneru (výchozí 0). Menší hodnoty se zobrazí dříve.
flex-grow: určuje, jak moc může prvek růst v porovnání s ostatními, zabírajíc volný prostor. Výchozí 0.
flex-shrink: určuje, jak moc se může prvek zmenšit při nedostatku místa. Výchozí 1.
flex-basis: určuje základní velikost prvku před rozdělením volného prostoru. Může být v px, %, rem, auto atd. (výchozí auto).
flex: zkrácená vlastnost pro flex-grow, flex-shrink, flex-basis.
align-self: přepíše zarovnání align-items pro tento konkrétní prvek. Může mít stejné hodnoty.

.flex-item {
  order: 2; /* Tento prvek bude druhý */
  flex-grow: 1; /* Zabere zbývající místo */
  flex-shrink: 0; /* Nebude se zmenšovat */
  flex-basis: 100px; /* Základní velikost 100px */
  align-self: flex-start; /* Zarovnání na začátek */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

Flexbox umožňuje vytvářet různé rozvržení, od jednoduchých zarovnání po složitější responzivní struktury, řízením rozdělení prostoru a zarovnání prvků uvnitř kontejneru.

Jak používat flexbox pro rozvržení prvků na stránce?