Dobro razumijevanje Flexboxa i CSS Grida potrebno je ako želite izgraditi zadivljujuće, responzivne web stranice.
Ako pišete CSS neko vrijeme, dobre su šanse da ste barem čuli za ove pojmove. Možda ste čak koristili jedan ili oba u određenoj mjeri. Oba su moćni dijelovi CSS-a, sa sličnim, ali suptilno različitim slučajevima upotrebe.
Što je Flexbox?
Flexbox je jednodimenzionalna CSS metoda izgleda koja postoji već neko vrijeme. Flexbox možete zamisliti kao hrpu povezanih CSS svojstava koja možete koristiti za poravnavanje HTML elemenata u spremniku i upravljanje prostorom između njih.
Prije Flexboxa, ova vrsta rasporeda zahtijevala je frustrirajuću i nezgrapnu upotrebu float i svojstva položaja.
Ako ste zabrinuti oko podrške preglednika za Flexbox, nemojte biti. Prema caniuse.com, svi moderni preglednici podržavaju Flexbox.
Osnove Flexboxa
Dok Flexbox uključuje mnoga CSS svojstva, osnove su prilično jednostavne. Korištenje Flexboxa uvijek počinje deklariranjem nadređenog spremnika kao fleksibilnog spremnika dodavanjem
zaslon: flex svojim stilskim pravilima. Čineći ovo automatski, sva djeca ovog elementa postaju fleksibilna.Nakon toga možete kontrolirati raspodjelu prostora unutar flex-kontejnera pomoću svojstvo justify-content. Možete kontrolirati poravnanje flex-items pomoću align-items vlasništvo.
Evo primjera koda koji koristi Flexbox za ravnomjerno raspoređivanje prostora u spremniku između njegovih potomaka i poravnavanje svih u središte spremnika. Ovo je HTML:
<div klasa="spremnik">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Ovo je CSS:
.kontejner {
zaslon: savitljiv;
širina: 100%;
justify-content: space-around;
align-items: center;
obrub: 1px puna crna;
visina: 200px;
}
.kontejner > div {
visina: 100px;
širina: 100px;
boja pozadine: crvena;
boja: bijela;
veličina fonta: 5rem;
poravnanje teksta: središte;
rubni radijus: 5px;
}
A ovo je rezultat:
Što je CSS Grid?
CSS Grid je sustav izgleda koji je komplementaran Flexboxu. Flexbox je moćan, ali nije baš prikladan za određene vrste izgleda. Pokušaj postavljanja strukture cijele stranice s Flexboxom na kraju će biti frustrirajući zadatak koji uključuje ružno, nesematsko označavanje i hakirani CSS.
CSS Grid nije zamjena za Flexbox, već alternativni sustav za neke situacije.
Podrška za CSS Grid nije tako opsežna kao za Flexbox, ali Grid je razumno dobro podržan u 2022.
Osnove CSS Grida
Koncept Grida je jednostavan. Kao što ime sugerira, CSS Grid vam omogućuje da podijelite prostor u nadređenom spremniku u mrežu redaka i stupaca, s bilo kojim brojem redaka/stupaca koji želite. Nakon toga odredite položaj podređenih stavki upućivanjem na linije nadređene mreže.
Započnite dodavanjem prikaz: rešetka na roditeljski spremnik. Zatim upotrijebite grid-template-rows i rešetka-predložak-stupci svojstva da odredite retke i stupce na koje želite podijeliti rešetku. Zatim možete koristiti mreža-stupac i grid-red svojstva na podređenim elementima kako bi im rekli gdje u mreži trebaju biti. Pogledajmo primjer Grida koji koristi postavku od pet elemenata od ranije, ali u kompliciranijem rasporedu.
Evo HTML-a:
<div klasa="spremnik">
<div>1</div>
<div klasa="dva">2</div>
<div klasa="tri">3</div>
<div klasa="četiri">4</div>
<div klasa="pet">5</div>
</div>Evo CSS-a:
.kontejner {
prikaz: rešetka;
širina: 100%;
grid-template-rows: ponoviti (3, 1fr);
rešetka-predložak-stupci: ponavljanje (3, 1fr);
praznina: 0.5rem;
obrub: 1px puna crna;
visina: 300px;
}.kontejner > div {
boja pozadine: crvena;
boja: bijela;
veličina fonta: 5rem;
poravnanje teksta: središte;
rubni radijus: 5px;
}
.kontejner > .dva {
rešetka-red: 2;
mreža-stupac: 2;
}
Evo rezultata:
CSS Grid također uključuje dosta toga druga svojstva koja možete koristiti za izgradnju složenijih izgleda.
Koji biste trebali koristiti?
Prvo, važno je napomenuti da vas ništa ne sprječava da Flexbox i Grid koristite zajedno i, u nekim slučajevima, to je optimalan izbor. Uz to, odgovorimo na pitanje koji je raspored svaki od ovih sustava najprikladniji za implementaciju.
Flexbox je najprikladniji za izradu izgleda koji uključuju poravnavanje i distribuciju elemenata u jednoj liniji. Primjeri ove vrste izgleda su poravnanje ikona na kraju odjeljka ili raspoređivanje veza u navigacijskoj traci.
Mreža, s druge strane, najviše blista kada morate precizno pozicionirati elemente u odnosu na druge (i vodoravno i okomito), a ovo vam je pozicioniranje potrebno za lako prilagođavanje različitim veličinama zaslona.
Za demonstraciju, evo koda koji biste trebali napisati da biste ponovno stvorili izgled iz primjera Grid s Flexboxom.
HTML:
<div klasa="spremnik">
<div klasa="pod jedan">
<div>1</div>
<div>5</div>
</div><div klasa="sub dva">
<div>2</div>
</div>
<div klasa="sub tri">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.kontejner {
obrub: 1px puna crna;
visina: 300px;
}.pod {
zaslon: savitljiv;
širina: 100%;
}.jedan, .tri {
justify-content: razmak između
}.dva {
justify-content: centar;
}
.pod > div {
visina: 100px;
širina: 100px;
boja pozadine: crvena;
boja: bijela;
veličina fonta: 5rem;
poravnanje teksta: središte;
rubni radijus: 5px;
}
A ovo je rezultat:
Glavna stvar koju ovdje treba imati na umu je da iako ovaj kod proizvodi isti izlaz kao primjer Grid, ovdje je označavanje znatno kompliciranije. Implementacija ovog rasporeda zahtijeva podspremnike, a numerirane divove morate postaviti izvan redoslijeda u označavanju.
Nadalje, pretpostavite da ste morali pomaknuti ovaj raspored u neugodan položaj: recimo poravnavanje 5. diva s 2. divom. Da ste koristili Flexbox za ovo, morali biste pribjeći položaj: relativan ili nešto slično. Koristeći Grid, sve što trebate je pomaknuti mreža-stupac vlasništvo.
No, nasuprot tome, implementacija jednostavnog poravnanja jednog retka iz primjera Flexboxa s Gridom rezultirala bi puno više CSS-a. Mreža je očito manje prikladna za takvu vrstu izgleda.
Dok Flexbox i Grid uglavnom mogu međusobno kopirati efekte, postoje neke iznimke. Preklapanje elemenata prilično je teško samo s Flexboxom, ali vrlo je jednostavno s Gridom. Mreža također ne dopušta elementima da se odmaknu od drugih elemenata s marginom: automatski na način na koji Flexbox radi.
Flexbox i Grid su moćni sustavi izgleda
Flexbox i CSS Grid sustavi su dizajna koji olakšavaju postavljanje sadržaja vaše web stranice. Mreža je najbolja za dvodimenzionalne rasporede s mnogo elemenata koji moraju biti precizno postavljeni jedan u odnosu na drugi. Flexbox je bolji za jednodimenzionalne ili jednolinijske rasporede gdje samo trebate rasporediti hrpu elemenata na određeni način.
