O înțelegere solidă a Flexbox și CSS Grid este necesară dacă doriți să construiți site-uri web uimitoare și receptive.
Dacă ai scris CSS de mult timp, sunt șanse mari să fi auzit măcar de acești termeni. S-ar putea chiar să fi folosit unul sau ambele într-o oarecare măsură. Ambele sunt părți puternice ale CSS, cu cazuri de utilizare similare, dar subtil diferite.
Ce este Flexbox?
Flexbox este o metodă de aspect CSS unidimensional care există de ceva vreme. Vă puteți gândi la Flexbox ca la o mulțime de proprietăți CSS asociate pe care le puteți utiliza pentru a alinia elementele HTML într-un container și pentru a gestiona spațiul dintre ele.
Înainte de Flexbox, acest tip de layout necesita utilizarea frustrantă și greoaie a float și proprietăți de poziție.
Dacă vă îngrijorează compatibilitatea browserului pentru Flexbox, nu vă faceți griji. Conform caniuse.com, toate browserele moderne acceptă Flexbox.
Elementele de bază ale Flexbox
In timp ce Flexbox include multe proprietăți CSS, elementele de bază sunt destul de simple. Utilizarea Flexbox începe întotdeauna prin declararea unui container părinte ca container flexibil prin adăugare
display: flex la regulile sale de stil. Făcând acest lucru, toți copiii acestui element fac automat elemente flexibile.După aceea, puteți controla distribuția spațiului în interiorul containerului flexibil folosind proprietatea justificare-conținut. Puteți controla alinierea elementelor flexibile cu alinierea elementelor proprietate.
Iată un exemplu de cod care utilizează Flexbox pentru a împărți spațiul dintr-un container în mod egal între copiii săi și a-i alinia pe toți în centrul containerului. Acesta este HTML:
<div class="recipient">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Acesta este CSS-ul:
.container {
display: flex;
latime: 100%;
justificare-conținut: spațiu-în jur;
alinierea elementelor: centru;
chenar: 1px negru solid;
înălțime: 200px;
}
.container > div {
înălțime: 100px;
lățime: 100px;
culoare de fundal: roșu;
culoare albă;
dimensiunea fontului: 5rem;
text-align: centru;
chenar-rază: 5px;
}
Și iată rezultatul:
Ce este CSS Grid?
CSS Grid este un sistem de aspect care este complementar Flexbox. Flexbox este puternic, dar nu foarte potrivit pentru anumite tipuri de layout-uri. Încercarea de a aranja structura unei întregi pagini cu Flexbox va ajunge să fie o sarcină frustrantă, care implică un marcaj urât, non-sematic și CSS hacky.
CSS Grid nu este un înlocuitor Flexbox, ci mai degrabă un sistem alternativ pentru anumite situații.
Suportul pentru CSS Grid nu este la fel de extins ca și pentru Flexbox, dar Grid este rezonabil de bine susținut în 2022.
Elementele de bază ale CSS Grid
Conceptul de Grid este simplu. După cum sugerează și numele, CSS Grid vă permite să împărțiți spațiul dintr-un container părinte într-o grilă de rânduri și coloane, cu orice număr de rânduri/coloane doriți. După aceea, specificați poziția elementelor secundare prin referință la liniile grilei părinte.
Începe prin a adăuga afișaj: grilă la containerul părinte. Apoi utilizați rânduri-șablon-grilă și grilă-șablon-coloane proprietăți pentru a specifica rândurile și coloanele în care doriți să împărțiți grila. Apoi puteți utiliza grilă-coloană și grilă-rând proprietăți ale elementelor copil pentru a le spune unde ar trebui să fie în grilă. Să ne uităm la un exemplu Grid care utilizează configurația cu cinci elemente de mai înainte, dar într-un aranjament mai complicat.
Iată codul HTML:
<div class="recipient">
<div>1</div>
<div class="Două">2</div>
<div class="Trei">3</div>
<div class="patru">4</div>
<div class="cinci">5</div>
</div>Iată CSS-ul:
.container {
afisare: grila;
latime: 100%;
grid-template-rows: repeta (3, 1fr);
grid-template-coloane: repeta (3, 1fr);
decalaj: 0.5rem;
chenar: 1px negru solid;
înălțime: 300px;
}.container > div {
culoare de fundal: roșu;
culoare albă;
dimensiunea fontului: 5rem;
text-align: centru;
chenar-rază: 5px;
}
.container > .Două {
grilă-rând: 2;
grilă-coloană: 2;
}
Iată rezultatul:
Grila CSS include, de asemenea, o mulțime de alte proprietăți pe care le puteți utiliza pentru a construi machete mai complexe.
Pe care ar trebui să-l folosiți?
În primul rând, este important să rețineți că nimic nu vă împiedică să utilizați Flexbox și Grid împreună și, în unele cazuri, aceasta este alegerea optimă. Acestea fiind spuse, haideți să răspundem la întrebarea ce layout este cel mai potrivit pentru implementare fiecare dintre aceste sisteme.
Flexbox este cel mai potrivit pentru a construi aspecte care implică alinierea și distribuirea elementelor pe o singură linie. Exemple de acest tip de aspect sunt alinierea pictogramelor la sfârșitul unei secțiuni sau aranjarea legăturilor într-o bară de navigare.
Grila, pe de altă parte, strălucește cel mai tare atunci când trebuie să poziționați cu precizie elementele față de altele (atât pe orizontală, cât și pe verticală) și aveți nevoie de această poziționare pentru a vă adapta cu ușurință la diferite dimensiuni de ecran.
Pentru a demonstra, iată codul pe care ar trebui să-l scrieți pentru a recrea aspectul din exemplul Grid cu Flexbox.
HTML:
<div class="recipient">
<div class="sub unu">
<div>1</div>
<div>5</div>
</div><div class="sub doi">
<div>2</div>
</div>
<div class="sub trei">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
chenar: 1px negru solid;
înălțime: 300px;
}.sub {
display: flex;
latime: 100%;
}.unu, .Trei {
justificare-conținut: spațiu-între
}.Două {
justificare-conținut: centru;
}
.sub > div {
înălțime: 100px;
lățime: 100px;
culoare de fundal: roșu;
culoare albă;
dimensiunea fontului: 5rem;
text-align: centru;
chenar-rază: 5px;
}
Și iată rezultatul:
Principalul lucru de remarcat aici este că, deși acest cod produce aceeași ieșire ca exemplul Grid, marcajul aici este semnificativ mai complicat. Implementarea acestui aspect necesită sub-containere și trebuie să plasați div-urile numerotate din ordine în markup.
În plus, să presupunem că trebuie să mutați acest aspect într-o poziție incomodă: să spunem alinierea a 5-a div cu a 2-a. Dacă ai fi folosit Flexbox pentru asta, ar trebui să recurgi la poziție: relativă sau ceva asemanator. Folosind Grid, tot ce aveți nevoie este să mutați grilă-coloană proprietate.
Dar, în contrast, implementarea alinierii simple cu o singură linie din exemplul Flexbox cu Grid ar avea ca rezultat mult mai mult CSS. Grid este evident mai puțin potrivit pentru acest tip de aspect.
În timp ce Flexbox și Grid se pot replica în mare parte efectele celuilalt, există câteva excepții. A face suprapunerea elementelor este destul de greu doar cu Flexbox, dar este foarte ușor cu Grid. Grid, de asemenea, nu permite elementelor să se îndepărteze de alte elemente cu marjă: automat așa cum o face Flexbox.
Flexbox și Grid sunt sisteme puternice de aspect
Flexbox și CSS Grid sunt ambele sisteme de design care facilitează aranjarea conținutului paginii dvs. web. Grila este cea mai bună pentru layout-uri bidimensionale cu multe elemente care trebuie să fie poziționate cu precizie unele față de altele. Flexbox este mai bun pentru machetele unidimensionale sau cu o singură linie în care trebuie doar să spațiați o grămadă de elemente într-un anumit fel.
