Citat:
talicni67 kaže:
Ono malo što sam video u flexbox, jeste da nema više muke oko upotrebe clear: both; i float.
|
I već u samom startu si shvatio jednu od velikih prednosti Flexbox modela u odnosu na "stari način" - potpuno eliminisanje potrebe za upotrebom float-ova.
Druga stvar koju ćeš veoma brzo shvatiti je sa kojom lakoćom Flexbox omogućava vertikalno i horizontalno centriranje sadržaja - nešto sa čime su se web developeri borili skoro dve decenije i dovijali se raznim trikovima (postavljanje fiksnog line-height-a, negativne margine ukombinovane sa translacijom itd.).
Recimo, skoro sva vertikalna i horizontalna navigacija je nekada rađena floatovima. Float kontejneri, obično unordered lista (<ul>) sa <li> elementima unutar tog kontejnera, bi bili "levo floatovani" i naslagani jedno na drugo. Međutim, stara izreka kaže "ako imaš problem sa layoutom, ubaciš float da ga rešiš... sada imaš dva problema"
Flexbox model je tu legao kao budali šamar - nešto što se pre toga rešavalo satima, ili čak danima, sada se rešava za minut-dva.
CSS Grid model sa druge strane cilja tzv. "top-down" pristup. To znači da sa njime u startu razlišljaš o generalnom rasporedu elemenata na stranici, pa se kasnije radi ostalo (detalji). Neke stvari na početku mogu da budu malo nejasne ali jednom kad ovladaš Grid-om nikada se više nećeš vraćati praistoriji.
I za kraj ovog zida teksta jedan savet odmah od početka. Nemoj da posmatraš Flexbox i Grid kao nešto što treba isključivo odvojeno koristiti.
Grid i Flexbox su predviđeni da se međusobno kombinuju! Recimo, zaglavlje, sidebar sa strane, footer i glavni sadržaj odradiš Grid-om, a horizontalnu ili vertikalnu navigaciju (recimo glavni meni) Flexboxom. Kombinacija kao iz raja zamišljena.
I još jednom, nemoj da se bojiš da će Flexbox i Grid bilo gde nestati. Ova dva standarda se tek učvršćuju i biće tu bar još desetak godina. Plus podrška za oba standarda se već bliži procentu od 97%+ korisnika.
EDIT: Evo jednog korisnog linka ka YouTube materijalu. Neću previše ulaziti u to ko je Jen Simmons ali njeni Grid tutorijali se još uvek smatraju jednim od najboljih na Webu.
https://www.youtube.com/channel/UC7T...nbDalbHplROtag