Ja vēlaties izveidot satriecošas, atsaucīgas vietnes, ir nepieciešama laba izpratne par Flexbox un CSS Grid.
Ja esat rakstījis CSS kādu ilgu laiku, pastāv liela iespēja, ka esat vismaz dzirdējis par šiem terminiem. Iespējams, jūs pat zināmā mērā esat izmantojis vienu vai abus. Tās abas ir spēcīgas CSS daļas ar līdzīgiem, bet smalki atšķirīgiem lietošanas gadījumiem.
Kas ir Flexbox?
Flexbox ir viendimensijas CSS izkārtojuma metode, kas pastāv jau kādu laiku. Varat iedomāties Flexbox kā saistītu CSS rekvizītu kopumu, ko varat izmantot, lai līdzinātu HTML elementus konteinerā un pārvaldītu atstarpi starp tiem.
Pirms Flexbox šāda veida izkārtojumam bija nepieciešams nomākts un smagnējs pludiņa un pozīcijas īpašības.
Ja uztraucaties par pārlūkprogrammas Flexbox atbalstu, neuztraucieties. Saskaņā ar caniuse.com, visas mūsdienu pārlūkprogrammas atbalsta Flexbox.
Flexbox pamati
Kamēr Flexbox ietver daudzus CSS rekvizītus, pamati ir diezgan vienkārši. Flexbox lietošana vienmēr sākas ar vecākkonteinera deklarēšanu kā elastīgu konteineru, pievienojot
displejs: flex saviem stila noteikumiem. Veicot šo darbību, visi šī elementa atvasinājumi automātiski kļūst par elastīgiem vienumiem.Pēc tam jūs varat kontrolēt telpas sadalījumu elastīgajā konteinerā, izmantojot justify-content īpašums. Varat kontrolēt elastīgo vienumu izlīdzināšanu ar izlīdzināt vienumus īpašums.
Šeit ir koda piemērs, kas izmanto Flexbox, lai vienmērīgi sadalītu vietu konteinerā starp bērniem un tos visus saskaņotu konteinera centrā. Šis ir HTML:
<div klase="konteiners">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Šis ir CSS:
.konteiners {
displejs: flex;
platums: 100%;
attaisnot-saturs: telpa-ap;
izlīdzināt vienumus: centrs;
apmale: 1px vienkrāsains melns;
augstums: 200 pikseļi;
}
.konteiners > div {
augstums: 100 pikseļi;
platums: 100 pikseļi;
fona krāsa: sarkana;
krāsa: balta;
fonta izmērs: 5rem;
teksta līdzināšana: centrs;
apmales rādiuss: 5 pikseļi;
}
Un šeit ir izvade:
Kas ir CSS režģis?
CSS Grid ir izkārtojuma sistēma, kas papildina Flexbox. Flexbox ir jaudīgs, taču nav īpaši piemērots noteiktiem izkārtojumu veidiem. Mēģinājums izkārtot visas lapas struktūru, izmantojot Flexbox, būs nomākts uzdevums, kas saistīts ar neglītu, nesemātisku iezīmēšanu un hacky CSS.
CSS Grid nav Flexbox aizstājējs, bet gan alternatīva sistēma dažām situācijām.
CSS Grid atbalsts nav tik plašs kā Flexbox, taču Grid ir pietiekami labi atbalstīts 2022. gadā.
CSS režģa pamati
Režģa jēdziens ir vienkāršs. Kā norāda nosaukums, CSS Grid ļauj sadalīt vietu vecākkonteinerā rindu un kolonnu režģī ar jebkuru rindu/kolonnu skaitu, kas jums patīk. Pēc tam jūs norādāt pakārtoto vienumu pozīciju, atsaucoties uz vecākrežģa līnijām.
Sāciet ar pievienošanu displejs: režģis uz vecāku konteineru. Pēc tam izmantojiet režģis-veidne-rindas un režģis-veidne-kolonnas rekvizītus, lai norādītu rindas un kolonnas, kurās vēlaties sadalīt režģi. Pēc tam varat izmantot režģis-kolonna un režģis-rinda bērnelementu īpašības, lai norādītu, kur režģī tiem jāatrodas. Apskatīsim režģa piemēru, kurā tiek izmantota piecu elementu iestatīšana iepriekš, taču sarežģītākā izkārtojumā.
Lūk, HTML:
<div klase="konteiners">
<div>1</div>
<div klase="divi">2</div>
<div klase="trīs">3</div>
<div klase="četri">4</div>
<div klase="pieci">5</div>
</div>Šeit ir CSS:
.konteiners {
displejs: režģis;
platums: 100%;
grid-template-rows: atkārtojiet (3, 1fr);
režģis-veidne-kolonnas: atkārtojiet (3, 1fr);
plaisa: 0.5rem;
apmale: 1px vienkrāsains melns;
augstums: 300 pikseļi;
}.konteiners > div {
fona krāsa: sarkana;
krāsa: balta;
fonta izmērs: 5rem;
teksta līdzināšana: centrs;
apmales rādiuss: 5 pikseļi;
}
.konteiners > .divi {
režģa rinda: 2;
režģis-kolonna: 2;
}
Šeit ir izvade:
CSS Grid ietver arī daudz citi rekvizīti, kurus varat izmantot, lai izveidotu sarežģītākus izkārtojumus.
Kuru no tiem vajadzētu izmantot?
Pirmkārt, ir svarīgi atzīmēt, ka nekas neliedz jums izmantot Flexbox un Grid kopā, un dažos gadījumos tā ir optimālā izvēle. Tomēr atbildēsim uz jautājumu, kuru izkārtojumu ieviešanai katra no šīm sistēmām ir vispiemērotākā.
Flexbox ir vislabāk piemērota tādu izkārtojumu veidošanai, kas ietver elementu izlīdzināšanu un sadali vienā rindā. Šāda veida izkārtojuma piemēri ir ikonu līdzināšana sadaļas beigās vai saišu kārtošana navigācijas joslā.
Savukārt režģis visspilgtāk spīd, kad elementi ir precīzi jānovieto attiecībā pret citiem (gan horizontāli, gan vertikāli), un šī pozicionēšana ir nepieciešama, lai viegli pielāgotos dažādiem ekrāna izmēriem.
Lai parādītu, šeit ir kods, kas jums būs jāieraksta, lai atkārtoti izveidotu izkārtojumu no Grid piemēra ar Flexbox.
HTML:
<div klase="konteiners">
<div klase="apakšviens">
<div>1</div>
<div>5</div>
</div><div klase="apakš divi">
<div>2</div>
</div>
<div klase="apakš trīs">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.konteiners {
apmale: 1px vienkrāsains melns;
augstums: 300 pikseļi;
}.sub {
displejs: flex;
platums: 100%;
}.viens, .trīs {
attaisnot-saturs: atstarpe-starp
}.divi {
attaisnot-saturs: centrs;
}
.sub > div {
augstums: 100 pikseļi;
platums: 100 pikseļi;
fona krāsa: sarkana;
krāsa: balta;
fonta izmērs: 5rem;
teksta līdzināšana: centrs;
apmales rādiuss: 5 pikseļi;
}
Un šeit ir izvade:
Galvenais, kas jāņem vērā, ir tas, ka, lai gan šis kods rada tādu pašu izvadi kā Grid piemērs, šeit iezīmēšana ir ievērojami sarežģītāka. Lai ieviestu šo izkārtojumu, ir nepieciešami apakškonteineri, un numurētie divi elementi marķējumā ir jānovieto ne kārtībā.
Turklāt pieņemsim, ka šis izkārtojums ir jāpārvieto neērtā pozīcijā: teiksim, pielīdzinot 5. divdaļu ar otro. Ja šim nolūkam būtu izmantojis Flexbox, jums tas būtu jāizmanto pozīcija: relatīvs vai kaut kas līdzīgs. Izmantojot Grid, viss, kas jums nepieciešams, ir pārvietot režģis-kolonna īpašums.
Taču, gluži pretēji, vienkāršas vienas rindiņas izlīdzināšanas ieviešana no Flexbox piemēra ar Grid radītu daudz vairāk CSS. Režģis acīmredzami ir mazāk piemērots šāda veida izkārtojumam.
Lai gan Flexbox un Grid lielākoties var atkārtot viens otra efektus, ir daži izņēmumi. Elementu pārklāšanās ir diezgan sarežģīta, izmantojot tikai Flexbox, bet ļoti viegli ar Grid. Režģis arī neļauj elementiem attālināties no citiem elementiem ar rezervi: automātiski, kā to dara Flexbox.
Flexbox un Grid ir jaudīgas izkārtojuma sistēmas
Flexbox un CSS Grid ir dizaina sistēmas, kas atvieglo tīmekļa lapas satura izkārtošanu. Režģis ir vislabākais divdimensiju izkārtojumiem ar daudziem elementiem, kas precīzi jānovieto viens pret otru. Flexbox ir labāks viendimensijas vai vienas rindiņas izkārtojumiem, kur jums vienkārši ir nepieciešams noteiktā veidā izvietot vairākus elementus.
