Share
Alinierea este probabil cel mai confuz aspect al flexbox. Modulul layout flexbox are o mână de proprietăți de aliniere care se comportă diferit în circumstanțe diferite, iar atunci când le folosiți, este posibil să nu înțelegeți neapărat ce se întâmplă sau de ce. Cu toate acestea, dacă știți la ce să acordați atenție, alinierea este mai puțin complicată decât apare prima dată. Acest tutorial vă va ajuta să înțelegeți perfect alinierea flexbox.
Când folosim flexbox lucrăm cu două axe: principal și traversa axe. După cum sugerează și numele acestora, aceste axe formează o relație ierarhică, axa principală fiind superioară axei transversale.
Axa transversală este întotdeauna perpendiculară pe axa principală. Această relație ierarhică constituie principala diferență dintre flexbox și CSS Layout Grid. Prin proiectare, grila CSS are două axe non-ierarhice: axele rândului și coloanei. Acest lucru se datorează faptului că creatorii de standarde web au intenționat ca grila CSS să fie folosită ca model de aspect bidimensional. Flexbox, pe de altă parte, are o axă primară și una secundară, deoarece scopul său este de a fi un model unidimensional. Partea răcoroasă despre flexbox este aceea că puteți defini direcția acestei singure dimensiuni prin setarea poziției axei principale, prin urmare puteți crea atât machete bazate pe rând, cât și coloane.
Pentru a evita confundarea cu proprietățile de aliniere, rețineți întotdeauna că atunci când utilizați flexbox, lucrați cu un model unidimensional. Chiar dacă aspectul dvs. are două dimensiuni (adică rânduri și coloane), elementele flexibile pot curge numai într-o direcție, de-a lungul axei principale. Puteți justifica elementele flexibile în acea direcție și puteți alinia distanțele dintre elementele individuale de-a lungul axei încrucișate.
Direcția axei principale este determinată de proprietatea direcției flexibile - există patru valori posibile:
Accentsconagua
direcția flexibilă: rând; - axa principală rulează de la stânga la dreapta (aceasta este cea implicită)direcția flexibilă: rând-invers; - axa principală rulează de la dreapta la stângadirecție flexibilă: coloană; - axa principală rulează de sus în josdirecția flexibilă: coloană-inversă; - axa principală rulează de jos în susSă vedem cum arată acest lucru în browser. Voi folosi markup HTML foarte simplu, doar nouă cutii stivuite unul pe altul:
123456789
Divizia exterioară cu .recipient clasa va fi containerul flexibil, iar interiorul se va diviza cu .articol clasa va fi elementele flexibile.
Așa cum am menționat, direcția flex este implicită rând; dacă nu setați nimic altceva, aceasta va fi valoarea folosită. După cum puteți vedea mai jos, am adăugat doar proprietăți flexbox legate de containerul flex. Elementele flexibile au primit câteva proprietăți pentru scopuri decorative:
.container display: flex; flex-wrap: folie; direcția flexibilă: rând;
Cand flex-direcție este rând, axa principală rulează orizontal, de la stânga la dreapta. Aceasta este, prin urmare, direcția în care sunt prevăzute elementele flexibile. Axa încrucișată rulează perpendicular, de sus în jos, iar atunci când se înfășoară elemente, acestea fac acest lucru în această direcție.
Atunci când direcția flex este dată valoarea rând-revers, poziția axelor rămâne aceeași, ceea ce înseamnă că axa principală va continua să funcționeze pe orizontală, iar axa transversală verticală. Cu toate acestea, rândul direcţie vor fi inversate: de la dreapta la stânga de-a lungul axei principale.
.container display: flex; flex-wrap: folie; direcția flexibilă: rând-invers;
Dacă te uiți la numerotarea elementelor flex văd că acum, fiecare rând este numerotat de la dreapta la stânga, dar elementele încă se înfășoară vertical în jos.
Dacă doriți, de asemenea, să inversați direcția axei încrucișate, trebuie să o utilizați wrap-revers pe flex-wrap proprietate. Găsește diferența:
Cand flex-direcție este setat sa coloană, axele principale și cele încrucișate își schimbă pozițiile. Axa principală va rula vertical (de sus în jos), iar axa transversală se va desfășura orizontal (de la stânga la dreapta).
.container display: flex; flex-wrap: folie; direcție flexibilă: coloană; max-înălțime: 35rem; / * astfel încât ambalajele * /
Acum veți vedea că numerotarea elementelor flexare nu urmează rânduri, ci coloane. Aici este probabil natura unidimensională a flexbox-ului cea mai vizibilă. Elementele se vor înfășura numai dacă recipientul are o înălțime fixă.
Mă aștept să vezi un tipar care se dezvoltă aici. Cand flex-direcție este setat sa coloană inversă, axa principală este încă verticală, iar axa transversală este încă orizontală, așa cum am văzut în exemplul anterior. Cu toate acestea, direcția coloanei este inversată astfel încât axa principală să fie orientată de jos în sus.
.container display: flex; flex-wrap: folie; direcția flexibilă: coloană-inversă; max-înălțime: 35rem; / * astfel încât ambalajele * /
După cum vedeți mai jos, numerotarea elementelor flexibile începe în partea stângă jos, deplasându-se în sus și spre dreapta.
Din nou, pentru a schimba direcția axei încrucișate, trebuie să utilizați wrap-revers pe flex-wrap proprietate.
-Flow flex proprietate este o scurtătură pentru flex-direcție și flex-wrap. De exemplu, puteți utiliza:
flex-flow: colier;
in loc de:
direcție flexibilă: coloană; flex-wrap: folie;
Flexibilizarea alinierii se poate întâmpla atât pe axele principale, cât și pe axele încrucișate.
Una dintre proprietăți (justifică conținut) aparține axei principale, în timp ce celelalte trei (aliniați-elemente, alinierea auto, alinia conținut) aparțin axei încrucișate.
Așa cum vă puteți aștepta, comportamentul proprietăților de aliniere depinde de proprietatea direcției flexibile. De exemplu, justifică conținut aliniază elementele orizontal dacă flex-direcție este rând sau rând-revers, dar pe verticală dacă flex-direcție este coloană sau coloană inversă. Aceasta este adevărata frumusețe a a flexibil cutie.
Proprietatea justify-content aliniază obiectele flexibile din interiorul containerului flexibil de-a lungul axei principale. Distribuie spațiul suplimentar rămas după ce browserul a calculat spațiul necesar pentru toate articolele din containerul flexibil. Proprietatea justify-content poate lua cinci valori:
flex-start - articolele flexibile sunt justificate spre începutul axei principale (aceasta este cea implicită)flex-end - articolele flexibile sunt justificate spre sfârșitul axei principalecentru - articolele flexibile sunt justificate în jurul centrului axei principalespațiu între - elementele flexibile sunt distribuite uniform pe axa principală, de la flex-start la flex-endspațiu-în jurul valorii de - elementele flexibile sunt distribuite uniform pe axa principală, dar la fiecare capăt sunt adăugate spații de jumătate de mărimeA folosi justifică conținut în mod corespunzător, trebuie să acordați atenție direcțiilor axelor. De exemplu, justify-content: flex-start; regulă strânge elementele flexibile la începutul axei principale. Acesta este sfârșitul din stânga când direcția flex este rând, sfârșitul drept atunci când este rând-revers, cel mai înalt punct când este coloană, și cel mai de jos punct când este coloană inversă.
Următorul stilou arată modul în care diferite valori ale justifică conținut proprietatea alinia elemente flex atunci cand flex-direction este rând.
Este timpul să faceți lucrurile la nivelul următor. Poți să folosești Trei Proprietăți CSS pentru alinierea elementelor de-a lungul axei încrucișate. Doi dintre ei (aliniați-elemente și alinierea auto) sunt pentru alinierea unei singure linii, în timp ce alinia conținut este pentru alinierea multi-linie.
aliniați-elemente și alinierea auto proprietățile definesc modul în care spațiul este distribuit între elementele flexibile de-a lungul axei transversale. În realitate, ambele fac același lucru, dar în timp ce aliniați-elemente aliniază toate elementele din interiorul containerului flexibil, alinierea auto suprascrie această aliniere implicită pentru elementele flexibile individuale.
Ambele pot lua următoarele valori:
auto - face ca proprietatea aliniere să moștenească valoarea elementelor de aliniere (implicit pentru aliniere)flex-start - elementele flex sunt aliniate spre începutul axei încrucișateflex-end - elementele flexibile sunt aliniate spre capătul axei încrucișatecentru - Articolele flexibile sunt aliniate în jurul centrului axei transversalede bază - Articolele flex sunt aliniate astfel încât linia lor de linie să se aliniezeîntinde - Articolele flex sunt întinse de-a lungul axei încrucișate pentru a umple containerul flex (implicit pentru aliniere)Pixul de mai jos arată modul în care aliniați-elemente și alinierea auto proprietățile se comportă atunci când direcția de flexie este rând. Axa încrucișată implicit rulează de sus în jos. Elementele au diferite cantitati de padding astfel incat sa se schimbe inaltimile si liniile de baza. Puteți vedea, de exemplu, flex-start valoarea aliniază elementele la începutul axei transversale, în timp ce flex-end le aliniază la sfârșit.
Firește, când flex-direcție este coloană sau coloană inversă, veți lucra cu un layout pe bază de coloane, astfel încât aliniați-elemente și alinierea auto proprietățile vor alinia elementele orizontal în schimb.
Proprietatea de conținut aliniere face posibilă alinierea în mai multe linii de-a lungul axei încrucișate. Aceasta determină modul în care elementele flexibile din mai multe linii sunt distanțate una de cealaltă. Proprietatea de conținut aliniere nu are niciun efect asupra unui container flexibil pentru o singură linie (de exemplu, atunci când conținutul nu se înfășoară). Pot avea șase valori diferite:
flex-start - elementele flex sunt aliniate la începutul axei încrucișateflex-end - Articolele flexibile sunt aliniate la capătul axei încrucișatecentru - Articolele flexibile sunt aliniate în jurul centrului axei transversalespațiu între - articolele flexibile sunt distribuite uniform pe axa transversală, între începutul flex și capătul flexspațiu-în jurul valorii de - elementele flex sunt distribuite uniform pe axa transversală, dar la fiecare capăt sunt adăugate spații de jumătate de mărimeîntinde - articolele flex sunt întinse de-a lungul axei încrucișate pentru a umple containerul flexibil (aceasta este implicit)Mai jos, puteți vedea diferite stilouri care arată modul în care valorile diferite ale alinia conținut munca de proprietate. Ca și în cazul celorlalte demo-uri, se aplică instrucțiunile axei prestabilite.
Primele două exemple nu au o proprietate cu o singură linie (aliniați-elemente), astfel încât veți observa că toate elementele se întind în mod prestabilit. În acest exemplu vom stabili Elemente de aliniere: flex-start; astfel încât articole aliniați spre începutul axei transversale, dar vom stabili aliniere: flex-end; astfel încât conţinut este aliniat spre capătul axei:
Dacă ați înțelege tot ceea ce am parcurs până acum, ați făcut foarte bine! Acum aveți o înțelegere fundamentală solidă a alinierii flexbox.
Au fost efectuate! A recapitula; cel mai important lucru pe care trebuie să-l amintiți este că trebuie să păstrați în minte direcțiile principalelor axe și axelor încrucișate. Începeți întotdeauna alinierea prin configurarea flex-direcție proprietate. Pentru a afla mai multe despre alinierea flexbox și pentru a vă pune în practică cunoștințele, puteți să consultați și următoarele resurse:
