Flexbox v CSS a HTML (Návod) – vytváření responzivních rozložení

To tě čeká v kurzu k Flexboxu v CSS a HTML.

Co je Flexboxové rozložení a proč by se vlastně mělo používat?

Zde bude zahájeno projekt, ve kterém bude dále pracováno.

Zde představuji strukturu příkladu a integrované možnosti ladění v programu VS Code s nástroji MS Edge. V tomto videu je také poprvé aktivován layout Flexbox a nastaven směr.

Jak lze rovnoměrně nebo v určitých poměrech rozdělit prostor v uspořádání pomocí flexboxu?

Malá cvičení, které se neobejde bez trochy jednoduché matematiky.

Zde představuji horizontální layout s dvěma postranními panely, který se responsivně přizpůsobuje šířce.

Dětské prvky mohou být v flexibilním kontejneru zarovnány podél hlavní osy. Zde ukazuji, jak toto lze nastavit.

Nejen u kontejneru lze nastavit zarovnání všech potomků, pomocí align-self lze toto také různě upravit u jednotlivých prvků.

Malá cvičení na individuální zarovnání s kostkou.

Není možné zarovnat pouze podél hlavní osy v kontejneru s flexboxem, ale lze také provést některé úpravy zarovnání podél hlavní osy. ;-)

Malý příklad, jak skvěle využít zarovnání podél hlavní osy pro běžné rozložení.

Kdo chce být flexibilní, musí být schopen nastavit velikost potomků nezávisle na konkrétní šířce nebo výšce. Naštěstí tu je vlastnost flex-basis, s níž lze dosáhnout právě toho. Pokud změníte flex-direction, šířka se změní na výšku a naopak. 

O kolik by měl prvek narůst, pokud je k dispozici více místa než je stanoveno vlastností flex-basis? Toto lze specificky nastavit pomocí vlastnosti flex-grow.

O kolik by se měl prvek zmenšit, pokud je k dispozici méně místa než je stanoveno vlastností flex-basis? Toto lze nastavit specificky pomocí vlastnosti flex-shrink.

Děti prvky nemohou pouze smršťovat, když je méně místa, ale mohou být také prolomeny kontejnerem. Jak to udělat s vlastností flex-wrap, ukazuji v tomto videu.

flex-direction a flex-wrap lze kombinovat vlastností flex-flow. To dokonce dává smysl, pokud chcete nastavit pouze flex-direction, protože flex-flow je kratší. ;-)

Úkol k flex-wrap.

Někdy je třeba udržovat odstup, aby nebylo lidskému oku zbytečně nekomfortně. Naštěstí existuje vlastnost CSS s názvem gap, která toto přesně zajistí u potomků flexibilního kontejneru.

Pořádek musí existovat, zejména u webových rozhraní, protože by měla být snadno ovladatelná. Pořadí je někdy třeba určit individuálně, aniž by se přesunuly prvky v DOMu. K tomu je velmi vhodná vlastnost CSS s názvem order, s níž lze jednoduše změnit viditelné pořadí prvků.

Vyzkoušíme, jestli jste pochopili pořadí. Tady dokonce existuje druhá možnost, jak dosáhnout stejného výsledku, ale jste si jistě také jisti.

Často se stává, že chceme centrovat prvky a hlavně text horizontálně a vertikálně (!). To, co bylo dříve s Flexboxem noční můrou, je s Flexboxem hračka.

Kdo by jej neznal, toho 3-sloupcový design? Pokud se ještě vejde do dostupného místa, chybí už jen málo k responsivnímu designu.

Existují webové stránky bez formulářů? Pokud ano, nejsou jich mnoho. Proto je velmi důležité je přitažlivě uspořádat, což je naštěstí s pomocí Flexboxu žádný problém.

Velmi často se setkáváme s vnořenými rozloženími, ale s použitím Flex-layoutu už nejsou takovéto situace velkým problémem.

V současné době existuje nepřeberné množství webových chatovacích klientů a s chatboty s umělou inteligencí přibývá dalších. Jak však lze vytvořit chat pomocí Flexboxu? To ukážu v tomto videu.

Nejpozději od Webu 2.0 najdete téměř na každém webu galerii. V tomto videu popisuji, jak lze takové rozložení skvěle realizovat například pomocí Flexboxu.

Nyní by mělo být vše jasné ohledně Flex layoutu. Na závěr popíši, co byste měli získat, co ještě můžete udělat a jaké další krásné možnosti CSS layoutu existují.