Flexbox, plným názvem Flexible Box Module, je nástroj CSS, který umožňuje efektivní rozložení, zarovnání a distribuci prostoru mezi položkami v kontejneru, i když jejich velikost je neznámá nebo se dynamicky mění. Jeho hlavním cílem je poskytnout flexibilnější a přesnější způsob uspořádání, zarovnání a distribuce prostoru mezi položkami uvnitř kontejneru, zejména ve směrech, kde to tradiční blokové nebo inline modely nedokázaly uspokojivě řešit.

Základní pojmy

Při práci s flexboxem je důležité pochopit dva základní pojmy: flex kontejner (flex container) a flex položky (flex items). Flex kontejner je rodičovský prvek, do kterého umisťujeme flex položky. Tento kontejner definujeme nastavením vlastnosti display na hodnotu flex nebo inline-flex.

Vytvoření flex kontejneru

.container {
  display: flex;
}

Tento kód přemění element s třídou .container na flex kontejner, čímž umožní flexibilní manipulaci s jeho potomky (flex položkami).

Práce s flex položkami

Po definování flex kontejneru lze manipulovat s jeho flex položkami pomocí různých vlastností. Tyto vlastnosti zahrnují flex-direction, justify-content, align-items, flex-grow, flex-shrink a flex-basis.

Zarovnání a uspořádání položek

• flex-direction: Určuje hlavní osu flex kontejneru. Hodnoty mohou být row (výchozí), row-reverse, column nebo column-reverse.

• justify-content: Zarovnává flex položky podle hlavní osy. Hodnoty mohou být flex-start (výchozí), flex-end, center, space-between, space-around nebo space-evenly.

• align-items: Zarovnává flex položky podle vedlejší osy. Hodnoty mohou být flex-start, flex-end, center, baseline nebo stretch (výchozí).

Úprava velikosti flex položek

• flex-grow: Určuje, jak má být prostor rozdělen mezi flex položky v případě, že je více prostoru, než vyžadují. Výchozí hodnota je 0.

• flex-shrink: Určuje, jak mají být položky zmenšeny, pokud není dostatek prostoru. Výchozí hodnota je 1.

• flex-basis: Určuje výchozí velikost položky před distribucí zbývajícího prostoru. Výchozí hodnota je auto.

Praktický příklad

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.item {
  flex-grow: 1;
}

Tento kód nastaví flex kontejner tak, aby jeho položky byly rozloženy rovnoměrně podél hlavní osy, byly zarovnány na střed podle vedlejší osy a každá položka měla stejnou schopnost rozšířit se a využít dostupný prostor.

Flexbox je nesmírně užitečný pro vytváření responsivních layoutů, protože umožňuje položkám flexibilně reagovat na změny velikosti viewportu bez potřeby složitých výpočtů nebo pevných definic. Díky své flexibilitě a jednoduchosti použití se stal nezbytným nástrojem pro moderní webdesign.