Flexbox je jeden z nových způsobů, jak v CSS zapisovat layout, ale také zarovnání a distribuci volné plochy.
Související
V této aktualizované příručce přibyly texty s příklady pro všechny vlastnosti, které ve flexboxu můžete používat.
Flex v češtině znamená pružný, přizpůsobivý. Flexboxy jsou tedy pružné elementy layoutu. Jednou z hlavních předností flexboxu je totiž schopnost vyplňovat zbylý prostor.
Pokud sháníte příručku k vlastnostem flexboxu, tady je.
Všechny vlastnosti
Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku nebo položek.
Kontejner flexboxu
Hodnota vlastnosti display
flex
nastaví prvku kontext formátování flexboxem, takže jeho přímí potomkové mohou mít specifické vlastnosti. Možná je také „inline“ hodnota: inline-flex
.
Vlastnost | Co dělá a příklad |
---|---|
flex-wrap ![]() |
Definuje, zda se položky mohou zalamovat na více řádků nebo ne. Výchozí je nezalamovat. Např. flex-wrap: wrap – položky se mohou vykreslit na další řádek. |
flex-direction ![]() |
Určí směr toku rozvržení. Výchozí je zleva doprava, do řádku. Např. flex-direction: column – položky se skládají shora dolů, do sloupce. |
flex-flow ![]() |
Zkratka pro flex-wrap a flex-direction . Např. flex-flow: wrap column – položky se zalomují a skládají shora dolů. |
Dále lze na kontejner flexboxu aplikovat také vlastnosti zarovnání boxů (CSS Box Alignment):
Vlastnost | Co dělá a příklad |
---|---|
justify-items ![]() |
Zarovnání na řádkové ose (obvykle vodorovně). Např. justify-items: center centruje všechny položky. |
align-items ![]() |
Zarovnání na blokové ose (obvykle svisle). Např. align-items: end zarovná položky ke spodní hraně kontejneru. |
place-items ![]() |
Zkratka pro zarovnání položek v obou směrech. Např. place-items: end center zarovná položky ke spodní hraně a vodorovně na střed. |
K dispozici máme i vlastnosti CSS Box Align, řídící rozdělení volného prostoru, který uvnitř kontejneru zůstává mezi položkami.
Vlastnost | Co dělá? |
---|---|
justify-content ![]() |
Rozdělení prostoru na řádkové ose (obvykle vodorovně). Např. justify-content: space-between rozdělí prostor mezi položky. |
align-content ![]() |
Rozdělení prostoru na blokové ose (obvykle svisle). Např. align-content: start zajistí zarovnání položek k horní hraně kontejneru. |
place-content ![]() |
Zkratka pro rozdělení prostoru v obou směrech. Např. place-content: start space-between zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky. |
Položky flexboxu
Vlastnost | Co dělá a příklad |
---|---|
flex-grow ![]() |
Jak moc může položka růst. Výchozí je 0 . Např. flex-grow: 1 – bere si podíl v hodnotě 1 z volného prostoru. |
flex-shrink ![]() |
Faktor smršťování položky. Výchozí je 1 . Např. flex-shrink: 0 – položka se nesmršťuje. |
flex-basis ![]() |
Výchozí velikost položky. Výchozí je auto , tzn. podle width nebo height . Např. flex-basis: 0 – nehledí se na rozměr obsahu ani width či height . |
Také na položky flexboxu můžeme aplikovat vlastnosti zarovnání boxů:
Následujícími vlastnostmi pro konkrétní položku definujeme, jak se bude zarovnávat.
Vlastnost | Co dělá? |
---|---|
justify-self ![]() |
Zarovnání na řádkové ose (obvykle vodorovně). Např. justify-self: center vodorovně centruje položku. |
align-self ![]() |
Zarovnání na blokové ose (obvykle svisle). Např. align-self: end zarovná položku ke spodní hraně. |
place-self ![]() |
Zkratka pro zarovnání jednotlivé položky v obou směrech. Např. place-self: end center zarovná položku ke spodní hraně a vodorovně doprostřed. |
Nyní známe vlastosti a teď pojďme prozkoumat jednoduchý příklad.
Základy v jednoduchém příkladu
Představme si triviální třísloupcový layout:
<div class="container">
<p class="col col--1">First is loooooong.</p>
<p class="col col--2">Second is looooonger.<br/>…<br/>…</p>
<p class="col col--3">Third is short.</p>
</div>
HTML je jednoduché. O to přísnější máme požadavky na design. A víte co? Ukážeme si rovnou, jak je splnit pomocí flexboxu.
V dalším textu kód z CodePenu ještě poctivě vysvětlíme.
Všechny sloupce mají být stejně vysoké
Ano, i v případech kdy má ten jeden delší obsah než zbylé dva. To je to nejjednodušší. Stačí z rodiče pomocí vlastnosti display
udělat kontejner flexboxu:
.container {
display: flex;
}
Layout se při nedostatku místa zalomí
V případě, že zde nebude dost prostoru pro všechny položky, zalomíme. To definujeme pomocí vlastnosti flex-wrap
:
.container {
flex-wrap: wrap;
}
První dva sloupce jsou pružné, třetí nikoliv
Zároveň jsme si vymysleli, že první dva sloupce se budou změnšovat a zvětšovat, přičemž druhý dvakrát více než první. Třetí naopak nikoliv, zůstane vždy na svém. Tady pomůže zkratka vlastností položky flexboxu, flex
:
/* Pružná položka, zabírá jednu část volného místa: */
.col--1 {
flex: 1;
}
/* Pružná položka, zabírá dvě části volného místa: */
.col--2 {
flex: 2;
}
/* Fixně široká položka: */
.col--3 {
flex: none;
}
Na menších displejích se změní směr
Na mobilech zpravila není pro rozvržení prvků vedle sebe prostor. Přidáme proto změnu směru layoutu, což zajistíme vlastností flex-direction
:
@media (max-width: 400px) {
.container {
flex-direction: column;
}
}
Příklad si utíkejte vyzkoušet naživo na CodePen. cdpn.io/e/jOVVeVL
Je to hezké, že?
Flexbox je mistr na layouty komponent
Je dobré zmínit, že flexbox je určený pro layout komponent uvnitř stránek. Tedy navigací, formulářů, stránkovacích komponent atd. atd.
Pro celostránkové layouty se více hodí CSS Grid Layout. Užití flexboxu pro celostránkové layouty je samozřejmě možné. Jen se na velmi pomalých zařízeních nebo internetových připojeních nebude vykreslovat optimálně. Píše o tom třeba Jake Archibald. vrdl.in/zuscj
Šup na základní pojmy — flex kontejner a flex položka, hlavní a příčná osa
Flexbox tvoří nerozlučná dvojice dvou typů elementů – flex kontejner a flex položka. Flex položkou se stává každý přímý potomek kontejneru.
<ul class="flex-container">
<li>…</li>
<li>…</li>
</ul>
Flexbox nadefinujeme snadno jen pomocí flex kontejneru:
.flex-container {
display: flex;
}
Všechny <li>
se tady stávají flex položkami.
Kromě flex kontejnerů a položek nás v dalším textu budou zajímat ještě osy. Ukažme si to na zjednodušeném schématu:
- flex kontejner – rodičovský element
- flex položka – všichni přímí potomci flex kontejneru
- hlavní osa – výchozí je horizontální, ale lze změnit
- příčná osa – vždy příčná k hlavní, takže ve výchozí podobě svislá
- hlavní rozměr – výchozí je šířka, ale řídí se nastavením hlavní osy
- příčný rozměr – výchozí je výška
Podpora
Dostupnost vlastností flexboxu v prohlížečích je velmi dobrá, vždyť s podporou přišel už Internet Explorer 10! Grafy na CanIUse jsou tedy pěkně zelené. caniuse.com/flexbox
Konkrétní podporu je ale potřeba rozpadnout podle jednotlivých vlastností, uvedených výše v tabulce. Tam je situace už různorodější. Bojem s více či méně příjemnými chybami je provázena implementace v IE, protože jde o nejstarší dnes sloužící prohlížeče. Detailně se tím zabývá Philip Walton v repozitáři Flexbugs. github.com/philipwalton/flexbugs
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?