Flex
Totéž se dá vyřešit vlastnostmi kolem flex
. Funguje to ovšem zatím jen od Exploreru 10. Kromě Opery ve všech prohlížečích (ve Firefoxu, Chrome i IE 10) jen s prefixy (-moz-
a -webkit-
, -ms-
) a pomalu v každém prohlížeči pod jiným názvem. Ve Firefoxu funguje jen něco.
Nepoužíváte-li proto zmíněné prohlížeče, můžete si ukázky s klidem vypnout.
<div style='display: flex; display: -webkit-flex; display: -moz-box; display: -ms-flexbox'>
<p style='width: 50%; background: #ccc'>
<p style='width: 50%; background: yellow'>
</div>
Výhoda je, že se nemusí uvádět šířka, přizpůsobí se obsahu.
<p style='width: 50%; background: #ccc'>
<p style='background: yellow'>
<p style='background: #ccc'>
<p style='background: yellow'>
<p style='background: #ccc; width: 40%'>
<p style='background: yellow'>
<p style='background: #ccc'>
flex-direction
: Sloupce nebo řádky
Vlastnost flex-direction
se nastavuje pro flex-obal (tj. rodiče (display: flex
) flex-položek) a určuje způsob uspořádání.
Hodnota | Význam
|
flex-direction: row | v řádku – výchozí
|
flex-direction: row-reverse | v řádku v obráceném pořadí
|
flex-direction: column | v sloupci
|
flex-direction: column-reverse | v sloupci v obráceném pořadí
|
justify-content
: Vodorovné zarovnání
Vlastnost justify-content
určí způsob rozmístění flex-položek ve flex-obalu, pokud nemají plnou šířku.
Dává smysl jen při zobrazení v řádku – flex-direction: row(-reverse)
.
Hodnota | Význam
|
justify-content: flex-start | zleva – výchozí
|
justify-content: flex-end | zprava
|
justify-content: center | na střed
|
justify-content: space-between | rozpočítají se flex-položky, aby se stejnoměrně rozprostřely po prostoru
|
justify-content: space-around | podobné jako předchozí, jen se nechá prostor i na krajích.
|
align-items
: Zarovnání položek
Vlastnost align-items
, nastavovaná pro flex-obal, se chová odlišně při řádkové a sloupcové orientaci boxů (flex-direction
).
- Při
flex-direction: row
- Určuje svislé zarovnání nebo roztažení elementu v řádce. Projeví se v případě, že nejsou všechny boxy stejně vysoké.
- Při
flex-direction: column
- Určuje vodorovné zarovnání nebo roztažení.
Hodnota | Význam
|
align-items: flex-start | zleva/shora (záleží na flex-direction ) – výchozí
|
align-items: flex-end | zprava/zdola
|
align-items: center | na střed
|
align-items: baseline | přesně nevím, funguje dost podobně jako flex-start
|
align-items: stretch | roztažení elementu
|
flex-wrap
: Zalamování
Pokud je ve flex-obalu tolik flex-položek, že už se nevejdou, je možné je pomocí flex-wrap
zalomit.
Hodnota | Význam
|
---|
flex-wrap: nowrap | nic se nezalomí
|
flex-wrap: wrap | zalomí se
|
flex-wrap: wrap-reverse | zalomí se v obráceném pořadí |
První
element
Druhý
Třetí
element
Čtvrtý
Pátý
Šestý
Pořadí elementů
Hodně elegantní je možnost nastavování řazení. Stačí si je očíslovat vlastností order
a mohou být v kódu libovolně uspořádány. Nastavuje se pro flex-položky.
<p style="order: 1">Bude první
<p style="order: 3">Bude třetí
<p style="order: 2">Bude druhý
Úprava zarovnání
Jednotlivé flex-položky dědí zarovnání od flex-obalu. Vlastnost align-self
umí nastavení flex-obalu přebít. Hodnoty jsou stejné jako u align-item
, jen je navíc výchozí vlastnost auto
(tj. řídit se nastavením obalu).
Poměry roztahování
Vlastnostmi flex-grow
, flex-shrink
a flex-basis
nebo zkráceně flex: grow shrink basis
lze pro flex-položku nastavit, jak bude růst či ubývat vůči ostatním při přebytku, respektive nedostatku místa.
Hodnota flex-grow
a flex-shrink
se nastavuje od 0 do 1 a udává ochotu při roztahování a zmenšování se.
Pomocí flex-basis
se nastaví výchozí šířka/výška (v závislosti na flex-direction
), kterou by element rád měl, když se nebude muset zmenšovat nebo zvětšovat.
Vyzkoušejte
Pro lepší pochopení je ideální si flexibilní boxy vyzkoušet:
Využití
Při dostatečné podpoře v prohlížečích bude možné takto:
- stavět celý layout webu,
- řešit komplikované úlohy jako centrování položek s neznámou šířkou, stejně vysoké sloupce a jiné půjde velmi jednoduše,
- zjednoduší se přizpůsobování stránky šířce okna prohlížeče.