Sunt sigur că cel puțin o dată te-ai lovit de problema aranjării unor elemente în pagină folosind CSS și ceva nu se comporta așa cum te așteptai tu, sau părea că orice ai face, nu se schimbă nimic.
Nu-ți face griji, azi vei înțelege cum poți să-ți aranjezi elementele în pagină folosind flexbox, dar și ce să eviți pentru a nu mai avea această problemă pe viitor.
Ce este flexbox
Flexbox e o tehnică de CSS pentru a amplasa sau aranja elementele într-o secțiune a unei pagini ce se folosește de modelul unidimensional.
Știu că până aici sună abstract, nu-ți face griji, revenim la asta imediat.
Flexbox e puternic bazat pe relația părinte - copil sau container și element conținut.
Asta înseamnă că vei avea 2 modalități prin care să dictezi comportamentul unor elemente, fie de la părinte, care va propaga comportamentul asupra elementelor conținute, fie de la copil, care își va suprascrie comportamentul dictat de părinte.
O alternativă pentru CSS este Grid, care spre deosebire de Flexbox, care folosește modelul unidimensional ca regulă de bază pentru trasarea comportamentului elementelor, Grid folosește modelul multidimensional, care permite structurarea paginilor, sau secțiunilor unei pagini sub formă de matrice cu rânduri și coloane.
Dar despre Grid cu altă ocazie.
Flexbox și Grid înlocuiesc astfel vechile modele, ce foloseau fie conceptul de float, fie tabele pentru a aranja elementele în pagină.
Model unidimensional
Spuneam că Flexbox se folosește de modelul unidimensional, adică modul în care sunt aranjate elementele într-un container este gândit tot timpul într-o singură dimensiune, adică pe câte o axă o dată.
Astfel, putem să dăm valoarea proprietății flex-direction fie folosind row, fie column ceea ce va altera modul în care sunt “justificate” sau aranjate elementele pe viitor.
Dacă flex-direction va fi setat ca row pe elementul părinte, sau container, și se încearcă centrarea elementelor conținute în interior, această centrare se va face pe axa orizontală, pentru că în cazul lui row aceasta este axa principală, axa secundară, sau “cross-axis”, fiind cea verticală.
.parent {
display: flex;
flex-direction: row; /** valoarea implicită **/
justify-content: center; /** centrare pe axa orizontală **/
}
Dacă flex-direction va fi setat column pe elementul părinte, sau container, centrarea se va face folosind axa verticală, în schimb.
.parent {
display: flex;
flex-direction: column;
justify-content: center; /** centrare pe axa verticală **/
}
Tot timpul când vrem să transmitem informația de poziționare a elementelor, trebuie să ținem cont pe care axă i-am menționat părintelui că vom face asta, pentru că aceea va fi axa pe care se va încerca poziționarea.
Și când vorbim de poziționare, ne referim la modul în care elementele să fie așezate în container:
- De la începutul spre sfârșitul containerului
- În centru
- Sau de la finalul spre începutul containerului
Dacă vrem, în schimb, să centrăm elementele pe axa opusă decât cea dictată de flex-direction, putem să folosim align-items în loc de justify-content.
.parent {
display: flex;
flex-direction: column;
align-items: center; /** centrare pe axa orizontală **/
}
Relația părinte - copil
Ține minte că în cazul Flexbox tot timpul vei opera în această pereche părinte și copil, sau container și element conținut.
E important să ții minte asta, pentru că vei da majoritatea instrucțiunilor la nivelul părintelui, dar afectate vor fi elementele conținute, nu părintele în sine.
Limitele unui container
Vei observa că în flexbox nu se vorbește niciodată de poziții precum stânga, dreapta, sus sau jos.
Ci mai degrabă de start (început) sau end (sfârșit).
Care este începutul și sfârșitul unui container cu 4 laturi (stânga, dreapta, sus, jos) este o regulă dedusă din direcție.
Dacă flex-direction va avea valoarea row, începtul va fi latura din stânga a containerului.
Dacă flex-direction va avea valoarea column, începtul va fi latura de sus a containerului.
Asta în mod implicit, pentru că sunt situații când chiar și acestea se pot schimba în funcție de context.
Moduri de scriere
Una din situațiile când începutul și sfârșitul unui container nu va fi acela la care te aștepți e când modul de scriere este altul decât cel de la stânga la dreapta.
Modul în care se face scrierea în multe limbi e de la stânga la dreapta, așa cum e și în limba română, dar mai ales pentru că așa e în limba engleză.
Pentru că probabil limba în care ai browser-ul e engleză.
Iar această limbă setează acest mod de scriere și dictează mai departe care este începutul și finalul unui container.
Pentru că în limba arabă, scrisul se face de la dreapta la stânga, începutul și sfârșitul containerului își inversează pozițiile.
Ăsta este și motivul pentru care în flex, nu se vorbește niciodată despre poziții absolute de genul “stânga, dreapta, sus, jos”, pentru că ele sunt relative modului în care este scris textul.
Există și alte motive pentru care ai putea schimba modul de scriere al textului, cum ar fi obținerea unui anume design în pagină.
Să zicem că vrei să scrii literele unui cuvânt pe verticală în pagină, pentru a obține un design mai deosebit.
Concluzie
Flexbox e o modalitate mult mai facilă de poziționare sau aranjare a elementelor conținute într-un container sau într-o pagină în general, spre deosebire de tehnicile mai vechi ce foloseau float sau tabele în html. Pentru că CSS este compatibil cu toate versiunile anterioare, vechile tehnici încă mai funcționează și în prezent, dar sunt puternic descurajate.
