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.
