CSS flex

Float

Je-li potřeba umístit nějaké prvky vedle sebe, většinou se k tomu používá obtékání elementů. Přidá se float: left/right, nastaví se šířka (width) a jednotlivé prvky se tak dostanou vedle sebe. (Pod nimi se potom obtékání ukončí – clear: both.)

<p style='float: left; width: 50%; background: #ccc'>

<p style='float: left; width: 50%; background: yellow'>

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í.

HodnotaVýznam
flex-direction: rowv řádku – výchozí
flex-direction: row-reversev řádku v obráceném pořadí
flex-direction: columnv sloupci
flex-direction: column-reversev 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).

HodnotaVýznam
justify-content: flex-startzleva – výchozí
První
Druhý
Třetí
justify-content: flex-endzprava
První
Druhý
Třetí
justify-content: centerna střed
První
Druhý
Třetí
justify-content: space-betweenrozpočítají se flex-položky, aby se stejnoměrně rozprostřely po prostoru
První
Druhý
Třetí
justify-content: space-aroundpodobné jako předchozí, jen se nechá prostor i na krajích.
První
Druhý
Třetí

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í.
HodnotaVýznam
align-items: flex-startzleva/shora (záleží na flex-direction) – výchozí
První
Druhý
Třetí
align-items: flex-endzprava/zdola
První
Druhý
Třetí
align-items: centerna střed
První
Druhý
Třetí
align-items: baselinepřesně nevím, funguje dost podobně jako flex-start
align-items: stretchroztažení elementu
První
Druhý
Třetí

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.

HodnotaVýznam
flex-wrap: nowrapnic se nezalomí
flex-wrap: wrapzalomí se
flex-wrap: wrap-reversezalomí 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.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

Box model

Box model

Co je to a jaký box-model si vybrat. Jaké jsou výhody a nevýhody.

Komentáře