Hämmastavate ja tundlike veebisaitide loomiseks on vajalik Flexboxi ja CSS Gridi hea tundmine.
Kui olete CSS-i mõnda aega kirjutanud, on tõenäoline, et olete nendest mõistetest vähemalt kuulnud. Võib-olla olete mingil määral isegi ühte või mõlemat kasutanud. Mõlemad on CSS-i võimsad osad, millel on sarnased, kuid peenelt erinevad kasutusjuhud.
Mis on Flexbox?
Flexbox on ühemõõtmeline CSS-i paigutusmeetod, mis on olnud kasutusel juba mõnda aega. Võite mõelda Flexboxile kui hulgale seotud CSS-i atribuutidele, mida saate kasutada konteineris HTML-elementide joondamiseks ja nendevahelise ruumi haldamiseks.
Enne Flexboxi nõudis seda tüüpi paigutus hõljuvat ja kohmakat ujuki ja positsiooni omadused.
Kui olete mures Flexboxi brauseri toe pärast, ärge kartke. Vastavalt caniuse.com, kõik kaasaegsed brauserid toetavad Flexboxi.
Flexboxi põhitõed
Kuigi Flexbox sisaldab palju CSS-i atribuute, põhitõed on üsna lihtsad. Flexboxi kasutamine algab alati algkonteineri kuulutamisest paindlikuks konteineriks, lisades
ekraan: flex oma stiilireeglitele. Seda tehes muutuvad kõik selle elemendi alamelemendid automaatselt paindlikeks üksusteks.Pärast seda saate reguleerida ruumi jaotust painduvas mahutis, kasutades nuppu õigusta-sisu omadus. Saate juhtida painduvate elementide joondamist joondada-üksused vara.
Siin on koodinäide, mis kasutab Flexboxi konteineris oleva ruumi ühtlaseks jaotamiseks laste vahel ja joondamiseks konteineri keskele. See on HTML:
<div klass="konteiner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>See on CSS:
.konteiner {
ekraan: flex;
laius: 100%;
õigustama-sisu: ruumi ümber;
joonda-elemendid: keskel;
ääris: 1px täismust;
kõrgus: 200 pikslit;
}
.konteiner > div {
kõrgus: 100 pikslit;
laius: 100 pikslit;
taustavärv: punane;
värv: valge;
fondi suurus: 5rem;
teksti joondamine: keskel;
piiri raadius: 5 pikslit;
}
Ja siin on väljund:
Mis on CSS Grid?
CSS Grid on paigutussüsteem, mis täiendab Flexboxi. Flexbox on võimas, kuid ei sobi eriti teatud tüüpi paigutuste jaoks. Kui proovite Flexboxiga terve lehe struktuuri paika panna, on see masendav ülesanne, mis hõlmab inetu, mittesemaatilist märgistust ja häkkivat CSS-i.
CSS Grid ei ole Flexboxi asendus, vaid pigem alternatiivne süsteem teatud olukordades.
CSS Gridi tugi ei ole nii ulatuslik kui Flexboxi jaoks, kuid Grid on küll mõistlikult hästi toetatud aastal 2022.
CSS Gridi põhitõed
Võrgu kontseptsioon on lihtne. Nagu nimigi viitab, võimaldab CSS Grid jagada põhikonteineri ruumi ridade ja veergudega ruudustikuks, kus on suvaline arv ridu/veergud. Pärast seda määrate alamüksuste asukoha, viidates vanema ruudustiku ridadele.
Alusta lisamisega ekraan: ruudustik emakonteinerisse. Seejärel kasutage ruudustik-mall-read ja ruudustik-mall-veerud atribuudid, et määrata read ja veerud, milleks soovite ruudustiku jagada. Seejärel saate kasutada ruudustik-tulp ja ruudustik-rida atribuudid alamelementidel, et öelda neile, kus ruudustikus nad peaksid asuma. Vaatame ruudustiku näidet, mis kasutab varasemat viieelemendilist seadistust, kuid keerulisemas paigutuses.
Siin on HTML:
<div klass="konteiner">
<div>1</div>
<div klass="kaks">2</div>
<div klass="kolm">3</div>
<div klass="neli">4</div>
<div klass="viis">5</div>
</div>Siin on CSS:
.konteiner {
ekraan: ruudustik;
laius: 100%;
grid-template-rows: kordus (3, 1fr);
grid-template-columns: kordus (3, 1fr);
lõhe: 0.5rem;
ääris: 1px täismust;
kõrgus: 300 pikslit;
}.konteiner > div {
taustavärv: punane;
värv: valge;
fondi suurus: 5rem;
teksti joondamine: keskel;
piiri raadius: 5 pikslit;
}
.konteiner > .kaks {
ruudustiku rida: 2;
ruudustik-tulp: 2;
}
Siin on väljund:
CSS Grid sisaldab ka palju muud omadused, mida saate kasutada keerukamate paigutuste koostamiseks.
Millist neist peaksite kasutama?
Esiteks on oluline märkida, et miski ei takista teid Flexboxi ja Gridi koos kasutamast ning mõnel juhul on see optimaalne valik. Sellegipoolest vastame küsimusele, milliste paigutuste rakendamiseks need süsteemid kõige paremini sobivad.
Flexbox sobib kõige paremini selliste paigutuste ehitamiseks, mis hõlmavad elementide joondamist ja jaotamist ühel real. Seda tüüpi paigutuse näideteks on ikoonide joondamine jaotise lõpus või linkide paigutamine navigeerimisribale.
Grid seevastu särab kõige eredamalt siis, kui peate elemente teiste suhtes täpselt positsioneerima (nii horisontaalselt kui ka vertikaalselt) ja seda positsioneerimist on vaja erinevate ekraanisuurustega hõlpsaks kohanemiseks.
Demonstreerimiseks on siin kood, mille peate Flexboxiga ruudustiku näitest uuesti loomiseks kirjutama.
HTML:
<div klass="konteiner">
<div klass="alam üks">
<div>1</div>
<div>5</div>
</div><div klass="alam kaks">
<div>2</div>
</div>
<div klass="ala kolm">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.konteiner {
ääris: 1px täismust;
kõrgus: 300 pikslit;
}.sub {
ekraan: flex;
laius: 100%;
}.üks, .kolm {
õigusta-sisu: tühik-vahel
}.kaks {
õigustama-sisu: keskpunkt;
}
.sub > div {
kõrgus: 100 pikslit;
laius: 100 pikslit;
taustavärv: punane;
värv: valge;
fondi suurus: 5rem;
teksti joondamine: keskel;
piiri raadius: 5 pikslit;
}
Ja siin on väljund:
Peamine asi, mida siinkohal märkida, on see, et kuigi see kood annab sama väljundi kui Gridi näide, on märgistus siin oluliselt keerulisem. Selle paigutuse rakendamiseks on vaja alamkonteinereid ja nummerdatud divid tuleb märgistuses korrast ära paigutada.
Lisaks oletagem, et peate selle paigutuse ebamugavasse asendisse nihutama: nt viienda osa joondamine teisega. Kui oleksite selleks Flexboxi kasutanud, peaksite kasutama asend: suhteline või midagi sarnast. Gridi kasutades on vaja vaid nihutada ruudustik-tulp vara.
Kuid seevastu Flexboxi näite lihtsa üherea joondamise rakendamine ruudustikuga tooks kaasa palju rohkem CSS-i. Grid on ilmselgelt sellise paigutuse jaoks vähem sobiv.
Kuigi Flexbox ja Grid suudavad enamasti üksteise efekte korrata, on mõned erandid. Elementide kattumine on ainult Flexboxiga üsna raske, kuid Gridiga väga lihtne. Samuti ei lase ruudustik elementidel end teistest veerisega elementidest eemale tõugata: automaatne nii, nagu seda teeb Flexbox.
Flexbox ja Grid on võimsad paigutussüsteemid
Flexbox ja CSS Grid on mõlemad disainisüsteemid, mis muudavad teie veebilehe sisu paigutuse lihtsaks. Ruudustik sobib kõige paremini kahemõõtmeliste paigutuste jaoks, millel on palju elemente, mis peavad olema üksteise suhtes täpselt paigutatud. Flexbox sobib paremini ühemõõtmeliste või üherealiste paigutuste jaoks, kus peate lihtsalt teatud viisil eraldama hulga elemente.
