Flexbox CSS-is ja HTML-is (õpetus) - loo reageerivad paigutused

Seda ootab sind kursusel Flexbox CSS-is ja HTML-is.

Mis on Flexboxi paigutus ja miks peaksite seda üldse kasutama?

Siin luuakse projekt, milles seejärel edasi töötatakse.

Ma tutvustan siin näidestruktuuri ja Visual Studio Code-sse integreeritud silumisvõimalusi koos MS Edge'i tööriistadega. Lisaks selles videos esmakordselt aktiveeritakse painduvuslaotus (Flexbox) ja suund määratakse.

Kuidas jaotada koht paindliku kasti paigutuses võrdselt või kindlates suhetes?

Väike harjutus, kus ei saa üle ega ümber pisut (lihtsast) matemaatikast.

Siin tutvustan horisontaalset paigutust kahe külgnavigatsiooniga, mis kohaneb reageerivalt laiusega.

Trükkiminelemendid saab painutusmahuti mõõtude järgi teha. Siin ma näitan, kuidas seda seadistada saab.

Mitte ei saa mitte ainult konteineri korral määrata kõikide alamkomponentide joondamist, align-self abil saab seda teha ka üksikute elementide puhul erinevalt.

Väike harjutus üksikorienteerumiseks kuubikuga.

Mitme telje suunas saab paindliku konteineri elemente joondada mitte ainult risttelje suunas, vaid ka põhitelje suunas. ;-)

Väike näide sellest, kuidas peakuju joondamist saab sageli kasutatavas paigutuses väga hästi rakendada.

Kes soovib olla paindlik, peab suutma määrata ka lasteelementide suuruse sõltumatult konkreetsest laiusest või kõrgusest. Õnneks on olemas flex-basis-omadus, millega seda täpselt saavutada saab. Kui muuta flex-direction, muutub laius kõrguseks ja vastupidi. 

Kui rohkem ruumi on kui flex-basis ette näeb, siis kui palju element peaks kasvama? Seda saab määrata sihikindlalt flex-grow abil.

Mitu peaks element kokku tõmbuma, kui saadaval on vähem ruumi kui flex-basis ette näeb? Seda saab täpselt reguleerida flex-shrink abil. 

Üksused saavad mitte ainult kahaneda, kui ruumi on vähem, vaid ka murda mahutist välja. Kuidas seda kontrollida flex-wrap, näitan selles videos.

flex-suund ja flex-pakkimine saab määrata koos omadusega flex-vool. See on isegi mõistlik, kui soovitakse ainult määrata flex-suuna, kuna flex-vool on lühem. ;-)

Ülesanne flex-wrap kohta.

Vahemaa peab mõnikord olema, et inimese silma ei tekitataks ebamugavust. Õnneks on olemas gap CSS omadus, mis saavutab täpselt seda painutatud konteinerielementide puhul.

Kord peab eksisteerima, eriti veebirakenduste liideste puhul, sest need peaksid olema hästi kasutatavad. Järjekord tuleb mõnikord määrata individuaalselt, liikumata elemente DOM-is. Selle jaoks on väga hästi sobiv CSS-i omadus order, mille abil on võimalik elementide nähtavat järjekorda lihtsalt muuta.

Testime, kas olete järjekorra mõistnud. Siin on isegi teine võimalus saavutada sama tulemus, kuid olete selle kindlasti ka avastanud.

Sageli juhtub, et soovite elemente ja eriti teksti horisontaalselt ja vertikaalselt (!) keskele asetada. Mis oli enne flexboxi pingutus, on flexboxiga nagu laste sünnipäevapidu.

Kes teda ei teaks, seda 3-spleedi? Kui see kohandub saadaoleva ruumiga, siis puudub responsiivse disaini jaoks palju.

Kas on veebilehti ilma vormideta? Kui jah, siis neid pole palju. Seetõttu on väga oluline, et need oleksid atraktiivselt paigutatud, mis õnneks Flexboxiga pole probleem.

Väga sageli puututakse kokku pesastatud paigutustega, kuid paindliku paigutusega pole ka sellistel juhtudel suurt väljakutset.

Paraku on veebivestluse kliente nagu liiva mere ääres ning koos KI-vestlusbotidega on veelgi rohkem lisandunud. Kuidas aga saab vestlust Flexboxiga realiseerida? Näitan seda selles videos.

Hiljemalt alates Veeb 2.0-st leiab peaaegu igalt veebilehelt galerii. Selles videos kirjeldan, kuidas selline paigutus näiteks suurepäraselt Flexboxiga ellu viiakse.

Nüüd peaks kõik olema selge paindliku paigutuse osas. Lõpuks kirjeldan, mida peaksite olema õppinud, mida saate veel teha ja milliseid ilusaid CSSi paigutusvõimalusi on veel saadaval.