Flexbox v CSS in HTML (Vodnik) – razvijanje odzivnih postavitev

To te čaka v tečaju o Flexboxu v CSS in HTML.

Kaj je Flexbox postavitev in zakaj bi jo sploh morali uporabljati?

Tukaj se začne projekt, v katerem se nato nadaljuje delo.

Tukaj predstavljam strukturo primera in možnosti za odpravljanje napak, integrirane v VS Code z orodji MS Edge. Poleg tega bo v tem videoposnetku prvič aktiviran Flexbox layout in določena smer.

Kako enakomerno razdeliti prostor v postavitvi Flexbox v določenih razmerjih?

Majhna vaja, pri kateri se ne morete izogniti nekaj preprostim matematičnim računom.

Tukaj predstavljam vodoravno postavitev z dvema stranskima vrsticama, ki se odziva na širino.

Otroški elementi se lahko vzdolž prečne osi poravnajo od fleksibilnega posodobljenega vmesnika. Tukaj vam bom pokazal, kako to nastaviti.

Ni samo pri vsebniku mogoče nastaviti poravnavo vseh otroških elementov, s align-self je mogoče to prilagoditi tudi posameznim elementom.

Majhna vaja za usmerjanje posameznika z igralno kocko.

Ne samo vzdolž prečne osi je mogoče usmeriti v kontejnerju s prožnostjo, ampak tudi vzdolž glavne osi je mogoče usmeriti kar nekaj na usmeritev. ;-)

Majhen primer, kako lahko zelo dobro uporabimo poravnavo vzdolž glavne osi za pogosto postavitev.

Kdor želi biti prilagodljiv, mora biti sposoben določiti velikost otroških elementov neodvisno od konkretne širine ali višine. Na srečo obstaja lastnost flex-basis, s katero točno to lahko dosežete. Če spremenite flex-direction, se iz širine spremeni v višino in obratno. 

Za koliko naj se element poveča, če je na voljo več prostora kot ga določa flex-basis? To je mogoče natančno nastaviti z flex-grow.

Za koliko naj se element skrči, če je na voljo manj prostora, kot je določeno s flex-basis? To je mogoče natančno določiti z uporabo flex-shrink. 

Otroški elementi se lahko ne zmanjšajo le, če je manj prostora, ampak jih lahko tudi prebije vsebnik. Kako nadzorovati to s flex-wrap, bom pokazal v tem videu.

flex-direction in flex-wrap se lahko kombinira v lastnosti flex-flow. To ima smisel tudi takrat, ko želite nastaviti samo flex-direction, saj je flex-flow krajši. ;-)

Naloga na temo flex-wrap.

Razdalja mora biti včasih prisotna, da oči človeka ne bi bile neprijetno obremenjene. Na srečo obstaja CSS lastnost vrzel, ki točno to doseže pri otroških elementih fleksibilnega kontejnerja.

Red in disciplina, še posebej pri spletnih vmesnikih, saj naj bi bili ti dobro uporabni. Vrsto zaporedja je včasih treba določiti individualno, ne da bi premikali elemente v DOM. Za to je lastnost CSS order zelo primerna, s katero lahko enostavno spremenite vidno zaporedje elementov.

Preverimo, ali ste razumeli zaporedje. Tukaj obstaja celo druga možnost, da dosežete enak rezultat, vendar ste gotovo tudi na to pomislili.

Pogosto se zgodi, da želimo elemente in predvsem besedilo horizontalno in vertikalno (!) prestaviti. Kar je bilo prej z agonijo za Flexbox, je zdaj igrača za otroke.

Kdo ne pozna 3-stolpca? Če se ta še prilagodi razpoložljivemu prostoru, ni več veliko do odzivnega oblikovanja.

Ali obstajajo spletne strani brez obrazcev? Če ja, potem jih ni veliko. Zato je zelo pomembno, da jih privlačno razporedimo, kar na srečo s pomočjo Flexboxa ni težava.

Zelo pogosto se srečamo s poševnimi postavitvami, vendar tudi s fleksibilno postavitvijo niso več tako velik izziv.

Medtem je na spletu ogromno spletnih klepetalnikov in s KI klepetalniki se jih je še več dodalo. Kako pa lahko klepetalnik realiziramo z Flexboxom? To bom pokazal v tem videu.

Najkasneje od Web 2.0 dalje najdemo na skoraj vsaki spletni strani galerijo. V tem videoposnetku opisujem, kako lahko takšen postavitev na primer odlično izvedemo z uporabo Flexboxa.

Zdaj naj bi bilo vse jasno glede Flex-Layouta. Na koncu bom opisal, kaj bi morali naučiti, kaj še lahko naredite in kakšne lepe možnosti za CSS postavitev obstajajo.