Cum să aliniați lucrurile în CSS

Avem o întreagă selecție de moduri de a alinia lucrurile în CSS astăzi și nu este întotdeauna o decizie evidentă pe care să o folosim. Cu toate acestea, știind ce este disponibil înseamnă că puteți încerca oricând câteva tactici dacă întâlniți o anumită problemă de aliniere.

În acest articol, voi arunca o privire asupra diferitelor metode de aliniere. În loc să ofer un ghid cuprinzător pentru fiecare, voi explica câteva dintre punctele de blocare pe care le au oamenii și voi indica referințe mai complete pentru proprietăți și valori. Ca și în cazul multor CSS, puteți parcurge un drum lung prin înțelegerea lucrurilor fundamentale despre modul în care se comportă metodele și apoi aveți nevoie de un loc în care să căutați detaliile mai fine în ceea ce privește modul în care obțineți aspectul precis pe care îl doriți.

Alinierea textului și a elementelor inline

Când avem un text și alte elemente inline pe o pagină, fiecare linie de conținut este tratată ca o casetă de linie. Proprietatea text-align va alinia acel conținut pe pagină, de exemplu, dacă doriți ca textul să fie centrat sau justificat. Uneori, totuși, este posibil să doriți să aliniați lucrurile din interiorul acelei casete de linie cu alte lucruri, de exemplu, dacă aveți o pictogramă afișată alături de text sau text de diferite dimensiuni.

În exemplul de mai jos, am ceva text cu o imagine mai mare în linie. Folosesc vertical-align: middle pe imagine pentru a alinia textul la mijlocul imaginii.

Proprietatea și alinierea line-height

Amintiți-vă că proprietatea line-height va schimba dimensiunea casetei de linie și, prin urmare, vă poate schimba alinierea. Următorul exemplu folosește o valoare mare a înălțimii liniei de 150 px și am aliniat imaginea în partea de top . Imaginea este aliniată la partea de sus a casetei liniei și nu la partea de sus a textului, eliminați acea înălțime a liniei sau faceți-o mai mică decât dimensiunea imaginii, iar imaginea și textul se vor alinia în partea de sus a textului.

Se dovedește că line-height și, într-adevăr, dimensiunea textului sunt destul de complicate și nu am de gând să mă îndrept în acea groapă de iepure în acest articol. Dacă încercați să aliniați cu precizie elementele inline și doriți să înțelegeți cu adevărat ce se întâmplă, vă recomand să citiți „Deep Dive CSS: Font Metrics, line-height And vertical-align ”.

Când pot folosi proprietatea vertical-align ?

Proprietatea vertical-align este utilă dacă aliniați orice element în linie. Aceasta include elemente cu display: inline-block . Conținutul celulelor tabelului poate fi, de asemenea, aliniat cu proprietatea vertical-align .

Proprietatea vertical-align nu are niciun efect asupra elementelor flexibile sau grilă și, prin urmare, dacă este utilizată ca parte a unei strategii de rezervă, va înceta să se aplice în momentul în care elementul părinte este transformat într-un container grid sau flexibil. De exemplu, în următorul stilou, am un set de articole așezate cu display: inline-block și asta înseamnă că am posibilitatea de a alinia elementele chiar dacă browserul nu are Flexbox:

În acest stilou următor, am tratat inline-block ca o alternativă pentru aspectul Flex. Proprietățile de aliniere nu se mai aplică și pot adăuga align-items de aliniere pentru a alinia elementele în Flexbox. Puteți spune că metoda Flexbox este în joc, deoarece decalajul dintre elementele pe care îl veți obține atunci când utilizați display: inline-block a dispărut.

Faptul că vertical-align funcționează pe celulele tabelului este motivul pentru care trucul de a centra vertical un articol folosind display: table-cell funcționează.

Acum că avem modalități mai bune de a alinia casetele în CSS (așa cum ne vom uita în secțiunea următoare), nu este nevoie să folosim proprietățile vertical-align a text-align în alte locuri decât elementele inline și text pentru pe care au fost proiectate. Cu toate acestea, ele sunt încă complet valide pentru a fi utilizate în acele formate text și inline și, prin urmare, amintiți-vă că dacă încercați să aliniați ceva în linie, trebuie să ajungeți la aceste proprietăți și nu pe cele de aliniere a casetei.

Alinierea casetei

Specificația de aliniere a casetei se ocupă de modul în care aliniem totul. Specificația detaliază următoarele proprietăți de aliniere:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

S-ar putea să vă gândiți deja la aceste proprietăți ca făcând parte din specificația Flexbox, sau poate Grid. Istoria proprietăților este că au apărut ca parte a Flexbox și încă există în specificația de nivel 1; cu toate acestea, acestea au fost mutate în propria lor specificație când a devenit evident că erau utile în general. Acum le folosim și în Grid Layout și sunt specificate și pentru alte metode de layout, deși suportul actual pentru browser înseamnă că nu le veți putea folosi încă.

Prin urmare, data viitoare când cineva de pe Internet vă spune că alinierea verticală este cea mai grea parte a CSS, îi puteți spune acest lucru (care se încadrează chiar într-un tweet):

 .container { display: flex; align-items: center; justify-content: center; }

În viitor, s-ar putea chiar să renunțăm la display: flex , odată ce proprietățile de aliniere a casetei sunt implementate pentru aspectul bloc. În momentul de față, însă, a face ca părintele obiectului pe care îl doriți să centreze un container flexibil este modalitatea de a obține alinierea orizontală și verticală.

Cele două tipuri de aliniere

Când aliniați elementele flex și grid, aveți două lucruri posibile de aliniat:

1. Aveți spațiul liber în grila sau containerul flexibil (odată ce articolele sau pistele au fost așezate).
2. De asemenea, aveți articolul în sine în zona grilei în care l-ați plasat sau pe axa transversală din interiorul containerului flexibil.

V-am arătat un set de proprietăți mai sus, iar proprietățile de aliniere pot fi gândite ca două grupuri. Cele care se ocupă de distribuția spațiului liber și cele care aliniază articolul în sine.

Dealing With Spare Space: align-content și justify-content

Proprietățile care se termină în -content sunt despre distribuția spațiului, așa că atunci când alegeți să utilizați align-content sau justify-content , distribuiți spațiul disponibil între pistele de grilă sau elementele flexibile. Ele nu schimbă ele însele dimensiunea elementelor flex sau grid; le mută pentru că schimbă locul în care se duce spațiul de rezervă.

Mai jos, am un exemplu de flexibilitate și un exemplu de grilă. Ambele au un container care este mai mare decât este necesar pentru a afișa elementele flexibile sau pistele grilă, așa că pot folosi align-content și justify-content pentru a distribui acel spațiu.

Mutarea elementelor: justify-self , align-self , justify-items și align-items

Avem apoi align-self și justify-self așa cum sunt aplicate elementelor individuale flex sau grid; puteți folosi, de asemenea align-items justify-items pe container pentru a seta toate proprietățile simultan. Aceste proprietăți se ocupă de elementul flex sau grid propriu-zis, adică mutarea conținutului în interiorul zonei grilei sau liniei flexibile.

• Aspect grilă
  Obțineți ambele proprietăți, deoarece puteți muta elementul pe bloc și pe axa inline, deoarece avem o zonă de grilă definită în care se află.
• Aspect flexibil
  Vă puteți alinia doar pe axa transversală, deoarece axa principală este controlată numai de distribuția spațiului. Deci, dacă articolele dvs. sunt un rând, puteți utiliza align-self pentru a le muta în sus și în jos în interiorul liniei flexibile, aliniindu-le unul față de celălalt.

În exemplul meu de mai jos, am un container flex și un container grid și folosesc align-items align-self și autoaliniere în Flexbox pentru a muta elementele în sus și în jos unul față de celălalt pe axa transversală. Dacă utilizați Firefox și inspectați elementul utilizând Firefox Flexbox Inspector, puteți vedea dimensiunea containerului flexibil și modul în care elementele sunt mutate vertical în interiorul acestuia.

În grilă, pot folosi toate cele patru proprietăți pentru a muta elementele în interiorul zonei lor de grilă. Încă o dată, Firefox DevTools Grid Inspector va fi util atunci când jucați cu aliniere. Cu liniile grilei suprapuse, puteți vedea zona în care este mutat conținutul:

Joacă-te cu valorile din demonstrația CodePen pentru a vedea cum poți schimba conținutul în fiecare metodă de aspect:

Confuz Prin align și justify

Una dintre problemele citate cu oamenii care își amintesc proprietățile de aliniere în Grid și Flexbox este că nimeni nu își poate aminti dacă să alinieze sau să justifice. Care direcție este care?

Pentru aspectul grilă, trebuie să știți dacă vă aliniați în direcția bloc sau în linie. Direcția de blocare este direcția blocurilor așezate pe pagina ta (în modul de scriere), adică pentru engleză care este vertical. Direcția Inline este direcția în care se execută propozițiile (deci, pentru engleză, este de la stânga la dreapta pe orizontală).

Pentru a alinia lucrurile în direcția blocului, veți folosi proprietățile care încep cu align- . Folosiți align-content pentru a distribui spațiul între pistele grilei, dacă există spațiu liber în containerul grilei, și align-items sau align-self pentru a muta un element în interiorul zonei grilei în care a fost plasat.

Exemplul de mai jos are două modele de grilă. Unul are writing-mode: horizontal-tb (care este implicit pentru engleză) și celălalt writing-mode: vertical-rl . Aceasta este singura diferență dintre ele. Puteți vedea că proprietățile de aliniere pe care le-am aplicat funcționează exact în același mod pe axa blocului în ambele moduri.

Pentru a alinia lucrurile în direcția inline, utilizați proprietățile care încep cu justify- . Utilizați justify-content pentru a distribui spațiul între pistele grilei și justify-items sau justify-self pentru a alinia elementele din interiorul zonei grilei lor în direcția inline.

Încă o dată, am două exemple de aspect al grilei, astfel încât să puteți vedea că inline este întotdeauna inline - indiferent de modul de scriere pe care îl utilizați.

Flexbox este puțin mai complicat datorită faptului că avem o axă principală care poate fi schimbată în row sau column . Deci, să ne gândim mai întâi la axa principală. Este setat cu proprietatea flex-direction . Valoarea inițială (sau implicită) a acestei proprietăți este row , care va așeza elementele flexibile ca un rând în modul de scriere utilizat în prezent - de aceea, atunci când lucrăm în limba engleză, ajungem cu elemente așezate orizontal atunci când creăm un container flexibil. Apoi puteți schimba axa principală în flex-direction: column și articolele vor fi așezate ca o coloană, ceea ce înseamnă că sunt așezate în direcția blocului pentru acel mod de scriere.

Deoarece putem face această schimbare de axă, cel mai important factor din Flexbox este întrebarea „Care axă este axa mea principală?” Odată ce știți asta, atunci pentru aliniere (când sunteți pe axa principală) utilizați pur și simplu justify-content . Nu contează dacă axa principală este rândul sau coloana. Controlați spațiul dintre elementele flexibile cu justify-content .

Pe axa transversală, puteți utiliza align-items care vor alinia articolele din interiorul containerului flexibil sau linia flexibilă într-un container flexibil cu mai multe linii. Dacă aveți un container cu mai multe linii folosind flex-wrap: wrap și aveți spațiu în acel container, puteți utiliza align-content pentru a distribui spațiul pe axa transversală.

În exemplul de mai jos, le facem pe ambele cu un container flexibil afișat ca rând și coloană:

Când justify-content sau align-content nu funcționează

Proprietățile justify-content și align-content din Grid și Flexbox se referă la distribuirea spațiului suplimentar . Deci, lucrul de verificat este că aveți spațiu suplimentar.

Iată un exemplu Flex: am setat flex-direction: row și am trei elemente. Nu ocupă tot spațiul din containerul flexibil, așa că am spațiu liber pe axa principală, valoarea inițială pentru justify-content este flex-start și astfel toate articolele mele se aliniază la început și spațiul suplimentar este la final. Folosesc Firefox Flex Inspector pentru a evidenția spațiul.

Dacă schimb direcția flexibilă în space-between , spațiul suplimentar este acum distribuit între elemente:

Dacă acum adaug mai mult conținut la articolele mele, astfel încât acestea să devină mai mari și să nu mai existe spațiu suplimentar, atunci justify-content nu face nimic - pur și simplu pentru că nu există spațiu de distribuit.

O întrebare frecventă care mi se pune este de ce justify-content nu funcționează când flex-direction este column . În general, acest lucru se datorează faptului că nu există spațiu de distribuit. Dacă luați exemplul de mai sus și îl faceți flex-direction: column , articolele se vor afișa ca o coloană, dar nu va mai fi niciun spațiu suplimentar sub elemente așa cum este atunci când faceți flex-direction: row . Acest lucru se datorează faptului că atunci când realizați un container Flex cu display: flex aveți un container flexibil la nivel de bloc; aceasta va ocupa tot spațiul posibil în direcția inline. În CSS, lucrurile nu se întind în direcția blocului, deci nu există spațiu suplimentar.

Adăugați o înălțime containerului și, atâta timp cât este mai mult decât este necesar pentru afișarea articolelor, aveți spațiu suplimentar și, prin urmare, justify-content va funcționa pe coloana dvs.

De ce nu există justify-self în Flexbox?

Grid Layout implementează toate proprietățile pentru ambele axe, deoarece avem întotdeauna două axe de tratat în Grid Layout. Creăm piese (care pot lăsa spațiu suplimentar în containerul grilă în oricare dimensiune) și astfel putem distribui acel spațiu cu align-content sau justify-content . Avem și zone Grid, iar elementul din acea zonă poate să nu ocupe întregul spațiu al zonei, așa că putem folosi align-self sau justify-self pentru a muta conținutul în jurul zonei (sau align-items , justify-items pentru a modifica alinierea tuturor articolelor).

Flexbox nu are piste la fel ca aspectul Grid. Pe axa principală, tot ce trebuie să ne jucăm este distribuția spațiului dintre elemente. Nu există niciun concept de pistă în care să fie plasat un articol flexibil. Deci nu există nicio zonă creată în care să mutați elementul. Acesta este motivul pentru care nu există nicio proprietate justify-self pe axele principale în Flexbox.

Uneori, totuși, doriți să puteți alinia un element sau o parte a grupului de articole într-un mod diferit. Un model obișnuit ar fi o bară de navigare divizată cu un element separat de grup. În această situație, specificația recomandă utilizarea marjelor automate.

O marjă automată va ocupa tot spațiul în direcția în care este aplicată, motiv pentru care putem centra un bloc (cum ar fi aspectul paginii noastre principale) folosind o marjă din stânga și din dreapta a auto. Cu o marjă automată pe ambele părți, fiecare marjă încearcă să ocupe tot spațiul și astfel împinge blocul în mijloc. Cu rândul nostru de articole flexibile, putem adăuga margin-left: auto la elementul pe care dorim să se desfășoare divizarea și, atâta timp cât există spațiu disponibil în containerul flexibil, obțineți o împărțire. Acest lucru se joacă bine cu Flexbox, deoarece de îndată ce nu există spațiu disponibil, articolele se comportă ca elementele flexibile obișnuite.

Flexbox și micro-componente

Unul dintre lucrurile pe care cred că este adesea trecut cu vederea este cât de util este Flexbox pentru a face lucrări mici de aspect, în care ați putea crede că utilizarea vertical-align este calea de urmat. Folosesc adesea Flexbox pentru a obține o aliniere ordonată a modelelor mici; de exemplu, alinierea unei pictograme lângă text, alinierea liniei de bază a două lucruri cu dimensiuni diferite de font sau alinierea corectă a câmpurilor de formular și a butoanelor. Dacă vă străduiți să obțineți ceva care să se alinieze frumos cu vertical-align , atunci poate încercați să faceți treaba cu Flexbox. Amintiți-vă că puteți crea și un container flex inline dacă doriți cu display: inline-flex .

Nu există niciun motiv să nu folosiți Flexbox sau chiar Grid pentru lucrări mici de aspect. Nu sunt doar pentru bucăți mari de aspect. Încercați diferitele lucruri disponibile pentru dvs. și vedeți ce funcționează cel mai bine.

Oamenii sunt adesea foarte dornici să știe care este modul corect sau greșit de a face lucrurile. În realitate, adesea nu există nici un drept sau rău; o mică diferență în modelul dvs. ar putea însemna diferența dintre Flexbox care funcționează cel mai bine, unde, altfel, ați folosi vertical-align .

Încheierea

Pentru a încheia, am un rezumat rapid al elementelor de bază ale alinierii. Dacă vă amintiți aceste câteva reguli, ar trebui să puteți alinia majoritatea lucrurilor cu CSS:

1. Aliniați text sau un element inline? Dacă da, trebuie să utilizați text-align , vertical-align și line-height .
2. Aveți un articol sau articole pe care doriți să le aliniați în centrul paginii sau al containerului? Dacă da, faceți din container un container flexibil, apoi setați align-items: center și justify-content: center .
3. Pentru aspectul grilă, proprietățile care încep cu align- funcționează în direcția Bloc; cele care încep cu justify- lucrează în direcția inline.
4. Pentru Flex Layouts, proprietățile care încep cu align- funcționează pe axa transversală; cele care încep cu justify- lucrează pe axa principală.
5. Proprietățile justify-content și align-content distribuie spațiu suplimentar. Dacă nu aveți spațiu suplimentar în containerul flexibil sau grid, nu vor face nimic.
6. Dacă credeți că aveți nevoie justify-self în Flexbox, atunci utilizarea unei marje automate vă va oferi probabil modelul pe care îl căutați.
7. Puteți utiliza Grid și Flexbox împreună cu proprietățile de aliniere pentru lucrări mici de aspect, precum și componentele principale - experimentați!

Pentru mai multe informații despre aliniere, consultați aceste resurse:

• Aliniere casete CSS (documente web MDN)
• Tot ce trebuie să știți despre aliniere în Flexbox
• Cheatsheet pentru alinierea casetei