Norint sukurti stulbinančias, reaguojančias svetaines, būtinas tvirtas Flexbox ir CSS Grid supratimas.
Jei rašėte CSS ilgą laiką, yra didelė tikimybė, kad bent jau girdėjote apie šiuos terminus. Galbūt netgi tam tikru mastu naudojote vieną ar abu. Jos abi yra galingos CSS dalys, kurių naudojimo atvejai yra panašūs, bet subtiliai skiriasi.
Kas yra Flexbox?
„Flexbox“ yra vienmatis CSS išdėstymo metodas, kuris egzistuoja jau kurį laiką. Galite galvoti apie „Flexbox“ kaip apie daugybę susijusių CSS ypatybių, kurias galite naudoti norėdami suderinti HTML elementus konteineryje ir tvarkyti tarpą tarp jų.
Prieš „Flexbox“ tokio tipo išdėstymas reikalavo varginančio ir sudėtingo plūdės ir padėties savybės.
Jei nerimaujate dėl „Flexbox“ naršyklės palaikymo, nesijaudinkite. Pagal caniuse.com, visos šiuolaikinės naršyklės palaiko „Flexbox“.
„Flexbox“ pagrindai
Nors „Flexbox“ turi daug CSS ypatybių, pagrindai yra gana paprasti. „Flexbox“ naudojimas visada prasideda nuo pirminio sudėtinio rodinio paskelbimo lanksčiu sudėtiniu rodiniu, pridedant
ekranas: lankstus pagal savo stiliaus taisykles. Tai padarius, visi šio elemento antriniai elementai tampa lankstūs.Po to galite valdyti erdvės pasiskirstymą lankstaus konteinerio viduje naudodami pateisinančio turinio nuosavybę. Galite valdyti lanksčių elementų lygiavimą su išlyginti elementus nuosavybė.
Pateikiame kodo pavyzdį, kuris naudoja „Flexbox“, kad tolygiai paskirstytų erdvę konteineryje tarp savo vaikų ir sulygiuotų juos visus konteinerio centre. Tai yra HTML:
<div klasė ="konteineris">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Tai yra CSS:
.konteineris {
ekranas: lankstus;
plotis: 100%;
pateisinti-turinys: erdvė-aplink;
lygiuoti elementus: centre;
kraštinė: 1px vientisa juoda;
aukštis: 200 pikselių;
}
.konteineris > div {
aukštis: 100 pikselių;
plotis: 100 pikselių;
fono spalva: raudona;
spalva: balta;
šrifto dydis: 5rem;
teksto lygiavimas: centre;
kraštinės spindulys: 5 pikseliai;
}
O štai išvestis:
Kas yra CSS tinklelis?
CSS Grid yra išdėstymo sistema, kuri papildo „Flexbox“. „Flexbox“ yra galingas, bet nelabai tinkamas tam tikriems išdėstymo tipams. Bandymas išdėstyti viso puslapio struktūrą naudojant „Flexbox“ bus varginantis darbas, susijęs su bjauriu, nesematiniu žymėjimu ir įsilaužusiu CSS.
CSS Grid nėra „Flexbox“ pakaitalas, o veikiau alternatyvi sistema tam tikroms situacijoms.
CSS Grid palaikymas nėra toks platus kaip „Flexbox“, tačiau „Grid“ yra pakankamai gerai palaikoma 2022 metais.
CSS Grid pagrindai
Tinklelio koncepcija yra paprasta. Kaip rodo pavadinimas, CSS tinklelis leidžia padalyti pirminio konteinerio erdvę į eilučių ir stulpelių tinklelį su bet kokiu jums patinkančiu eilučių / stulpelių skaičiumi. Po to nurodykite antrinių elementų padėtį, nurodydami pirminio tinklelio eilutes.
Pradėkite pridėdami ekranas: tinklelis į pirminį konteinerį. Tada naudokite tinklelis-šablonas-eilutės ir tinklelis-šablonas-stulpeliai ypatybes, kad nurodytumėte eilutes ir stulpelius, į kuriuos norite padalyti tinklelį. Tada galite naudoti tinklelis-stulpelis ir tinklelis-eilė antrinių elementų ypatybes, kad nurodytų, kurioje tinklelio vietoje jie turėtų būti. Pažvelkime į tinklelio pavyzdį, kuriame naudojama ankstesnė penkių elementų sąranka, bet sudėtingesnė.
Štai HTML:
<div klasė ="konteineris">
<div>1</div>
<div klasė ="du">2</div>
<div klasė ="trys">3</div>
<div klasė ="keturi">4</div>
<div klasė ="penkios">5</div>
</div>Štai CSS:
.konteineris {
ekranas: tinklelis;
plotis: 100%;
grid-template-rows: pakartokite (3, 1fr);
tinklelis-šablonas-stulpeliai: pakartokite (3, 1fr);
tarpas: 0.5rem;
kraštinė: 1px vientisa juoda;
aukštis: 300 pikselių;
}.konteineris > div {
fono spalva: raudona;
spalva: balta;
šrifto dydis: 5rem;
teksto lygiavimas: centre;
kraštinės spindulys: 5 pikseliai;
}
.konteineris > .du {
tinklelis-eilė: 2;
tinklelis-stulpelis: 2;
}
Štai išvestis:
CSS tinklelis taip pat apima daug kitos savybės, kurias galite naudoti kurdami sudėtingesnius maketus.
Kurį turėtumėte naudoti?
Pirma, svarbu pažymėti, kad niekas netrukdo kartu naudoti „Flexbox“ ir „Grid“, o kai kuriais atvejais tai yra optimalus pasirinkimas. Be to, atsakykime į klausimą, kokius išdėstymus kiekviena iš šių sistemų yra tinkamiausia įgyvendinti.
„Flexbox“ geriausiai tinka statyti maketus, kurie apima elementų išlygiavimą ir paskirstymą vienoje eilutėje. Tokio išdėstymo pavyzdžiai yra piktogramų lygiavimas skyriaus pabaigoje arba nuorodų išdėstymas naršymo juostoje.
Kita vertus, tinklelis šviečia ryškiausiai, kai reikia tiksliai išdėstyti elementus, palyginti su kitais (tiek horizontaliai, tiek vertikaliai), o šis pozicionavimas reikalingas norint lengvai prisitaikyti prie įvairių ekrano dydžių.
Norėdami parodyti, čia yra kodas, kurį turėsite parašyti, kad iš naujo sukurtumėte išdėstymą pagal tinklelio pavyzdį naudodami „Flexbox“.
HTML:
<div klasė ="konteineris">
<div klasė ="po vieną">
<div>1</div>
<div>5</div>
</div><div klasė ="po du">
<div>2</div>
</div>
<div klasė ="po tris">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.konteineris {
kraštinė: 1px vientisa juoda;
aukštis: 300 pikselių;
}.sub {
ekranas: lankstus;
plotis: 100%;
}.vienas, .trys {
pateisinti-turinys: tarpas-tarp
}.du {
pateisinti-turinys: centras;
}
.sub > div {
aukštis: 100 pikselių;
plotis: 100 pikselių;
fono spalva: raudona;
spalva: balta;
šrifto dydis: 5rem;
teksto lygiavimas: centre;
kraštinės spindulys: 5 pikseliai;
}
O štai išvestis:
Pagrindinis dalykas, į kurį reikia atkreipti dėmesį, yra tai, kad nors šis kodas sukuria tokią pat išvestį kaip tinklelio pavyzdys, žymėjimas čia yra žymiai sudėtingesnis. Norint įgyvendinti šį išdėstymą, reikalingi subkonteineriai, o sunumeruotus divus turite dėti iš eilės žymėjime.
Be to, tarkime, kad reikėjo perkelti šį išdėstymą į nepatogią padėtį: tarkime, sulygiuoti 5-ąjį daliklį su 2-uoju. Jei tam naudojote „Flexbox“, turėtumėte pasinaudoti padėtis: santykinė ar kažkas panašaus. Naudojant tinklelį, viskas, ko jums reikia, yra perkelti tinklelis-stulpelis nuosavybė.
Tačiau, priešingai, įgyvendinus paprastą vienos eilutės derinimą iš „Flexbox“ pavyzdžio su tinkleliu, būtų daug daugiau CSS. Akivaizdu, kad tinklelis mažiau tinka tokiam išdėstymui.
Nors „Flexbox“ ir „Grid“ dažniausiai gali atkartoti vienas kito efektus, yra keletas išimčių. Elementus sutapti gana sunku naudojant tik „Flexbox“, bet labai lengva naudojant „Grid“. Tinklelis taip pat neleidžia elementams atsitraukti nuo kitų elementų su paraštėmis: automatiškai, kaip tai daro „Flexbox“.
„Flexbox“ ir „Grid“ yra galingos išdėstymo sistemos
„Flexbox“ ir „CSS Grid“ yra projektavimo sistemos, kurios palengvina tinklalapio turinio išdėstymą. Tinklelis geriausiai tinka dvimačiams maketams su daugybe elementų, kurie turi būti tiksliai išdėstyti vienas kito atžvilgiu. „Flexbox“ geriau tinka vienmačiui arba vienos eilutės maketams, kur jums tereikia tam tikru būdu išdėstyti krūvą elementų.
