Shrnutí
Flexbox řeší jednu řadu a otázku, jak si prvky rozdělí volné místo. Stejná mechanika – basis, grow, shrink – platí i ve chvíli, kdy se řádek zalomí na víc řádků.
Velikosti píšeme v rem, aby se stránka pohnula s velikostí písma nastavenou v prohlížeči. Kde má velikost růst s oknem, drží ji clamp() v mezích a ušetří nám media queries.
| Zápis | K čemu je |
|---|---|
flex: 1 |
prvky stejně široké, ať je v nich cokoli |
flex: auto |
delší obsah dostane víc místa |
flex: none |
prvek si drží svou velikost |
min-width: 0 |
povolí prvku zmenšit se pod šířku obsahu |
flex-wrap: wrap |
řada se zalomí, řádky spolu ale nelícují |
align-self |
zarovná jeden prvek jinak než zbytek řádku |
rem |
velikost z kořene dokumentu, pohne se s nastavením prohlížeče |
em |
velikost z písma rodiče, v zanoření se násobí |
ch |
šířka číslice 0, hodí se na maximální šířku odstavce |
vw, vh |
díl šířky nebo výšky okna |
clamp(1.5rem, 1rem + 2vw, 3rem) |
hodnota roste s oknem, ale nevyjede z mezí |
Umím?
-
Vysvětlím, co dělá každá ze tří hodnot v zápisu
flex. - Poznám podle rozvržení, jestli na něj sáhnout Flexboxem, nebo mřížkou.
- Vím, proč Flexbox přetéká, a umím to opravit.
-
Zarovnám prvky podél obou os a vysvětlím, proč se
justify-contentaalign-itemsprohodí se změnou směru. - Postavím řádek karet, který se sám zalomí, a vím, proč v něm sloupce nelícují.
-
Vyberu vhodnou relativní jednotku a vysvětlím, proč se
emv zanoření násobí aremne. - Vysvětlím, proč velikosti nepíšeme v pixelech a proč kořenu dokumentu nenastavujeme pevnou velikost písma.
-
Nastavím nadpisu plynulou velikost přes
clamp()tak, aby respektovala nastavení prohlížeče.