Flexbox v CSS & HTML (Návod) – vytváranie responzívnych rozložení

Čo ťa čaká v kurze o Flexboxe v CSS a HTML.

Čo je to Flexbox-Layout a prečo by sa malo vôbec používať?

Tu sa začína projekt, na ktorom sa neskôr ďalej pracuje.

Tu uvádzam príklad štruktúry a možnosti ladenia vstavané v programe VS Code s nástrojmi MS Edge. Okrem toho je v tomto videu prvýkrát aktivované usporiadanie Flexbox a nastavený smer.

Ako rovnomerne alebo v určitom pomere rozdeliť priestor v flexboxovom rozložení?

Malá cvičenie, pri ktorom neutečiete od trochy jednoduchej matematiky.

Tu predstavujem horizontálne rozloženie s dvoma bočnými panelmi, ktoré sa responsívne prispôsobuje šírke.

Detské prvky môžu byť zarovnané podľa krížovej osi flexibilného kontajnera. Tu ukážem, ako to môže byť nastavené.

Nie len pri kontajneri je možné nastaviť zarovnanie všetkých potomkov, pomocou align-self je možné to nastaviť aj u jednotlivých prvkov rôzne.

Malé cvičenie na individuálne zarovnanie s kockou.

Nie len pozdĺž krížového osi sa dá zarovnať v kontajneri typu Flex, dá sa zarovnať aj pozdĺž hlavnej osi. ;-)

Malý príklad, ako veľmi dobre môžete využiť zarovnávanie pozdĺž hlavnej osi pre časté rozloženie.

Kto chce byť flexibilný, musí byť schopný definovať veľkosť detí nezávisle od konkrétnej šírky alebo výšky. Našťastie existuje vlastnosť flex-basis-, s ktorou je možné presne to dosiahnuť. Keď zmeníme flex-direction, zmení sa šírka na výšku a naopak. 

O koľko by mal prvok rásť, keď je k dispozícii viac miesta než je určené flex-basis? Toto možno presne nastaviť pomocou vlastnosti flex-grow.

O koľko by mal prvok zmenšiť, keď je k dispozícii menej miesta než je definované flex-basis? Toto je možné presne nastaviť pomocou vlastnosti flex-shrink. 

Detské elementy sa môžu zmenšiť nielen v prípade nedostatku miesta, ale môžu byť aj preložené kontajnerom. Ako to ovládať pomocou flex-wrap, ukážem v tomto videu.

flex-direction a flex-wrap možno kombinovať vlastnosťou flex-flow. To má zmysel aj v prípade, ak chcete nastaviť iba flex-direction, pretože flex-flow je kratšie. ;-)

Úloha pre flex-wrap.

Vzdialenosť je niekedy potrebná, aby sa ľudskému oku nestalo zbytočne nepríjemne. Našťastie tu máme vlastnosť CSS s názvom gap, ktorá presne toto dosiahne u potomkov flexibilného kontajnera.

Poriadok musí byť, najmä v prípade webových rozhraní, pretože tieto by mali byť ľahko ovládateľné. Poradie niekedy musí byť nastavené individuálne bez presúvania prvkov v DOM. Na to je veľmi vhodná vlastnosť CSS s názvom order, s ktorou je možné jednoducho zmeniť viditeľné poradie prvkov.

Vyskúšajme si teraz, či ste pochopili poradie. Tu dokonca existuje druhá možnosť dosiahnutia rovnakého výsledku, ale určite na to tiež prídete.

Veľmi často sa stáva, že chceme centrovať prvky a hlavne text horizontálne a vertikálne (!). Čo bolo pred Flexboxom náročné, je s Flexboxom hračkou.

Kto by ho nepoznal, trojstĺpec? Ak sa ešte prispôsobí dostupnému miestu, nie je veľa čo chýba k responsívnemu dizajnu.

Existujú webové stránky bez formulárov? Ak áno, nie je ich veľa. Preto je veľmi dôležité pekne ich usporiadať, čo našťastie s Flexboxom nie je problém.

Veľmi často sa stretávame s vnorenými rozloženiami, ale s Flex-Layoutom už nie sú také veľkou výzvou.

Medzitým je na trhu nekonečné množstvo webových chatovacích klientov a s chatbotmi AI sa stále objavujú nové. Ale ako je možné realizovať chat pomocou Flexboxu? To vám ukážem v tomto videu.

Najneskôr od Webu 2.0 nájdete takmer na každej webovej stránke galériu. V tomto videu popisujem, ako sa takýto layout môže úžasne implementovať pomocou Flexboxu.

Teraz by malo byť jasné všetko, čo sa týka flexibilného rozloženia. Nakoniec popíšem, čo by ste mali vedieť, čo ešte môžete urobiť a aké krásne možnosti rozloženia sú k dispozícii pomocou CSS.