Co je flexbox
Ukázky z výkladu si celý dnešek budeme zkoušet na CodePenu. Otevřete si připravený zápis s šesti očíslovanými čtverci a nechte si ho po ruce – co uvidíte v ukázce, můžete do něj rovnou přepsat a hned se podívat, co to udělá.
Flexbox je způsob, jak v CSS dát prvky v rámci jedné řady vedle sebe a nechat je, ať si v ní mezi sebou rozdělí místo. Flexbox na rodičovském prvku a od té chvíle o rozmístění položek uvnitř rozhoduje on.
<div class="toolbar">
<button>Uložit</button>
<button>Kopírovat</button>
<button>Smazat</button>
</div>.toolbar {
display: flex;
gap: 8px;
}Prvku s display: flex říkáme flex kontejner, jeho přímým potomkům flex položky (flex items).
Jakmile zapneme flexbox:
- tlačítka se postaví vedle sebe v pořadí, ve kterém stojí v HTML,
- každé se zúží na šířku svého obsahu
- a všechna se natáhnou na stejnou výšku nejvyšší položky uvnitř flexboxu.
Mezeru mezi položkami můžeme přidat pomocí gap, tedy stejné vlastnosti, jakou jsme v minulé lekci používali v gridu.
Flexbox se přitom týká jen přímých potomků kontejneru. Co je zanořené uvnitř potomků, se chová dál po svém – text uvnitř tlačítka o žádném Flexboxu neví.
Směr řady
Řada nemusí být vodorovná. Vlastnost flex-direction ji překlopí na výšku a všechno ostatní funguje dál stejně:
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}Karta s obrázkem, nadpisem, popisem a tlačítkem pod sebou je přesně tenhle případ. Ať je směr row, nebo column, vždycky jde o jedinou řadu – flexbox neumí a nechce řešit řádky a sloupce naráz.
Můžeme si ho představit jako lidi na lavičce. Sednou si vedle sebe, a když je na lavičce místo, roztáhnou se; když je krátká, stisknou se k sobě. Kdo se roztáhne víc a kdo míň, se dá nastavit.
Kromě row a column umí flex-direction i obrácené varianty row-reverse a column-reverse – řadu otočí, ale nezmění, co je hlavní a co příčná osa. Všechny čtyři hodnoty s ukázkami najdete v dokumentaci MDN u flex-direction.
Rozdíl mezi flexboxem a gridem
Rozdíl mezi mřížkou (grid) a flexboxem je hlavně v postupu. Mřížku nejdřív nakreslíme a prvky do ní umístíme. Obsah se přizpůsobí mřížce a dodržuje nastavené řádky a sloupce.
Flexbox dá prvky do řady vedle sebe a podle toho, jaký je v nich obsah (nebo jak mají nastavenou velikost), se prvky o místo ve flexboxu podělí podle nastavených pravidel.