CSS Flexbox – Web dizajn kurs
Flexbox je jedna od stepenica u razvoju CSS-a koja je došla kao odgovor na mane tradicionalnog načina izrade layouta baziranog na box modelu i floatu. Prosto je prirodna težnja ka napretku i otklanjanje ograničenja dovela do ovog fenomenalnog poboljšanja. Cela problematika izrade dizajna je u načinu pravljenja redova i kolona na najlakši najsvrsishodniji način. Fleksibilnost je ono što olakšava rad i dolaskom responsive dizajna problemi koji su trebali da se reše razrešeni su flexom, dolazimo do pune kontrole u manipulisanju elementima dizajna, pogotovo manilupacija prostorom između elemenata je sada više nego jednostavna.
Flex container
Ono što prvo treba da razumemo kod flexa je da pravilo display: flex; stavljamo na roditeljski neki kontejner tj gradivni elemenat koji sadrži nekoliko drugih elemenata koji u sebi mogu da imaju naslove, paragrafe, slike, liste, slike…… Zapravo ključno primenjuje se samo na direktnu decu (items), unutrašnji elementi moraju da imaju zajedničkog roditelja. Ono što je najvažnije u početnom razumevanju Flexboxa je da postoje dve ose horiznotalna (glavna) i vertikalna (poprečna) što vidite i na naslovnoj slici i flex je zapravo jednodimenzioni način pravljena izgleda, biramo ili horizontalnu ili vertikalnu osu. U prvom primeru Flex container koristimo samo određena pravila na iteme (unutrašnje elemente / article) i kao što smo i rekli imamo pravila za roditelja i za decu da bi dobili potpunu kontrolu sa flexom u rasporedu. Primenom display flex pravila dobijemo elemente u kolonama unutar roditelja, ali ne dobijemo njihov lep i željeni raspored, već se oni u levom uglu smeste jedan do drugog i količina sadržaja određuje njihovu širinu, visina je difoltno zadata, pravilo align-items: stretch; tačnije elementi teže da se nameste u celoj visini roditelja. I tu se uvodi pravilo flex, koje u sebi sadrži 3 pravila, flex-grow, flex-shrink i flex-basis. Flex grow definiše širenje elementa, flex shrink definiše razmeru smanjenja elementa i Flex basis ukazuje na početnu širinu elementa. Mi smo se u primerima igrali sa svojstvom flex grow i flex basis, flex-grow: 1; u našem slučaju se odnosilo na iteme i to nam je donelo takav izgled da se naši elementi rasporede u ravnomernom rasporedu, da budu iste širine.
Flex direction
Difoltna osa u flexu je horizotalna osa (naslovna slika) i ne moramo da joj zadajemo to pravilo dodatno, pravilo flex-direction: row; se podrazumeva i elementi u našem slučaju artikli sa klasom item će biti poređani po horizontali, a ako ih želimo uspravno jednostavno promenimo pravilo flex-direction: column; umesto row stavimo vrednost column. I kod row i column opcije imamo reverse da se elementi ređaju u kontra smeru i to su vrednosti row-reverse, kao i column-reverse.
Promenom pravila flex direction tj promenom osa elementi koji su bili poređani horizntalno se ređaju jedan ispod drugog vertikalno, glavna osa nije horizontalna već vertikalna. Tu sad dolazi i do promene pravila koja su zadužena za ređanje untrašnjih elemenata itema justify-content i align-items ona se obrću isto kao ose, to je prvi momenat na koji treba obratiti pažnju. Ali o to morate probati kroz primere ispratićete video pa ćete lako to shvatiti.
Flex wrap
Flex wrap je pravilo koje omogućuje raspored elemenata u više redova, difolt vrednost je flex-wrap: nowrap; i kada stavimo da je flex-basis na primer 50% jer želimo da imamo dva elmenta u jednom redu i da se oni tako ređaju i više redova po dva to se neće desiti zbog ugrađene vredonsti nowrap (ređaće se s leva na desno i izaćići iz okvira roditelja i dobićemo horizontalni skrol) i to moramo da izmenimo na flex-wrap: wrap; i tada ćemo dobiti naše elemente u željenom rasporedu. Ovo pravilo pored rasporeda ima veliku korist i za responsive dizajn gde želimo raspored da prilagodio mobilnim uređajima i u većini slučajeva su to elementi koji imaju 100% širine, a taj momenat možemo rešiti i promenom flex directiin pravila sa row na column, ali imamo različite situacije i potrebe tako da je sam CSS takav da prosto moramo koristiti sva raspoloživa „oružja“ da „namestimo“ željeni ili predefinisani layout.
Justify content
Justify content nam reguliše način rasporeda elmenata po glavnoj osi kada imamo flex direction kao difoltnu vrednost, znači row (promenom ose menjaju se justifyy content i align items, tj i oni menjaju smer delovanja). Promenom osa na poprečnu ovo pravilo će određivati elemente po vertikalnoj osi koja postaje glavna, bitno je razumeti što smo imali već slike i to nadam se razumeli.
Ugrađeno svojstvo za justify-content je flex-start i naši elmenti će se nalaziti na početku kontejnera. Ako želimo da itemi budu na kraju kontejnera onda koristimo pravilo flex-end, centriran sadržaj pravimo pomoću pravila center. Imamo i opcije koje su jako korisne prvo space-between, kada se krajnji itemi smeste u uglove (levo i desno) a ostatak slobodnog prostora se rasporedi između elemenata ravnomerno. Zatim space-around, kada se pored svakog elementa dodaje jednak prostor levo i desno i to može biti vizuelno neuredno jer prvi i zadnji na krajevima imaju manje prostora nego unutrašnji elementi zapravo taj prostora na krajevima je duplo manji nego na unutrašnjim elementima. Taj problem rešava pravilo space-evenly koje svim elementima daje jednak prostor između.
Align items
Align items radi istu stvara kao i justify content, samo to radi na porečnoj osi. I ovo je jedno od velikih unapređenja CSS-a u izradi layouta. Ovo je baš falilo. Pored ovog pravila veliku pomoć je donelo i svojstvo order kojim možemo lako da izmenimo dodatno raspored na primer na mobilnim uređajima bez izmena u HTML-u. U primeru na videu smo dodali visnu kontejneru da bi mogli da elemente uređujemo po visini unutar nekog elementa. I krenuli smo tako što smo ostavili justify content na vrednost center. Sada imam zapravo u oba pravca potrebu za ređanjem elemenata. Ono što smo ranije i rekli elementi ako im ne zadamo pravilo align items zauzimaju celu visinu roditelja i to je vrednost stretch. A ako elemente želimo da stavimo na primer u centar bez ikakve muke i računanja to je lako ako i justify content i align items podesimo vrednost na center.
Align self
Evo još jednog veoma korisnog pravila, ako želimo da jednom od itema promenimo (može i više komada) pozicilu u odnosu na ostale veoma korisna mogućnost je previlo align self kojim dobijamo takvu mogućnost.
I na kraju primer
U videu o flexu napravili smo primer rasporeda elemenata u formi nekog bloga, gde smo rasporedili po 3 elementa u jednom redu i iskoristili sva pravila flexa koja smo prošli ranije kroz primere. Ovo je trenutno najbolji način, ali i dovoljno podržan od browsera i ima najširu primenu u produkcionim sajtovima, tako da je vreme da ako niste naučite Flexbox i evo našeg doprinosa tom poslu. Srećan rad 😉
