Dobro razumevanje Flexboxa in mreže CSS je potrebno, če želite zgraditi osupljiva, odzivna spletna mesta.
Če že dalj časa pišete CSS, je velika verjetnost, da ste vsaj slišali za te izraze. Morda ste do neke mere celo uporabili enega ali oba. Oba sta močna dela CSS s podobnimi, a subtilno različnimi primeri uporabe.
Kaj je Flexbox?
Flexbox je enodimenzionalna metoda postavitve CSS, ki obstaja že nekaj časa. Flexbox si lahko predstavljate kot kup povezanih lastnosti CSS, ki jih lahko uporabite za poravnavo elementov HTML v vsebniku in upravljanje prostora med njimi.
Pred Flexboxom je ta vrsta postavitve zahtevala frustrirajočo in okorno uporabo plovca in lastnosti položaja.
Če vas skrbi podpora brskalnika za Flexbox, naj vas ne skrbi. Po navedbah caniuse.com, vsi sodobni brskalniki podpirajo Flexbox.
Osnove Flexboxa
Medtem Flexbox vključuje številne lastnosti CSS, osnove so precej preproste. Uporaba Flexboxa se vedno začne z deklaracijo nadrejenega vsebnika kot vsebnika flex z dodajanjem zaslon: flex
svojim slogovnim pravilom. S tem samodejno postanejo vsi podrejeni elementi tega elementa prilagodljivi.Po tem lahko nadzorujete porazdelitev prostora znotraj vsebnika flex z uporabo lastnost justify-content. Poravnavo flex-itemov lahko nadzorujete z align-items premoženje.
Tukaj je primer kode, ki uporablja Flexbox za enakomerno porazdelitev prostora v vsebniku med njegove podrejene elemente in jih vse poravna na sredino vsebnika. To je HTML:
<razred div="posoda">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>To je CSS:
.posoda {
zaslon: flex;
širina: 100 %;
justify-content: space-around;
align-items: center;
obroba: 1px polna črna;
višina: 200px;
}
.posoda > div {
višina: 100 slikovnih pik;
širina: 100px;
barva ozadja: rdeča;
barva: bela;
velikost pisave: 5rem;
poravnava besedila: sredina;
polmer obrobe: 5px;
}
In tukaj je rezultat:
Kaj je mreža CSS?
CSS Grid je sistem postavitve, ki dopolnjuje Flexbox. Flexbox je zmogljiv, vendar ni zelo primeren za določene vrste postavitev. Poskus razporeditve strukture celotne strani s Flexboxom bo na koncu frustrirajoča naloga, ki bo vključevala grdo, nesematsko oznako in vdrl CSS.
CSS Grid ni zamenjava za Flexbox, temveč alternativni sistem za nekatere situacije.
Podpora za CSS Grid ni tako obsežna kot za Flexbox, vendar je Grid razmeroma dobro podprto leta 2022.
Osnove mreže CSS
Koncept mreže je preprost. Kot že ime pove, vam CSS Grid omogoča, da prostor v nadrejenem vsebniku razdelite na mrežo vrstic in stolpcev s poljubnim številom vrstic/stolpcev. Po tem določite položaj podrejenih postavk s sklicevanjem na vrstice nadrejene mreže.
Začnite z dodajanjem prikaz: mreža v nadrejeni vsebnik. Nato uporabite grid-template-rows in mreža-predloga-stolpci lastnosti, da določite vrstice in stolpce, na katere želite razdeliti mrežo. Nato lahko uporabite mreža-stolpec in mrežna vrstica lastnosti podrejenih elementov, da jim poveste, kje v mreži naj bodo. Poglejmo primer mreže, ki uporablja nastavitev petih elementov od prej, vendar v bolj zapleteni ureditvi.
Tukaj je HTML:
<razred div="posoda">
<div>1</div>
<razred div="dva">2</div>
<razred div="tri">3</div>
<razred div="štiri">4</div>
<razred div="pet">5</div>
</div>Tukaj je CSS:
.posoda {
prikaz: mreža;
širina: 100 %;
grid-template-rows: ponovitev (3, 1fr);
mreža-predloga-stolpci: ponovitev (3, 1fr);
vrzel: 0.5rem;
obroba: 1px polna črna;
višina: 300px;
}.posoda > div {
barva ozadja: rdeča;
barva: bela;
velikost pisave: 5rem;
poravnava besedila: sredina;
polmer obrobe: 5px;
}
.posoda > .dva {
mreža-vrstica: 2;
mreža-stolpec: 2;
}
Tukaj je rezultat:
CSS Grid vključuje tudi veliko druge lastnosti, ki jih lahko uporabite za izdelavo kompleksnejših postavitev.
Katerega bi morali uporabiti?
Najprej je pomembno vedeti, da vam nič ne preprečuje, da bi Flexbox in Grid uporabljali skupaj in v nekaterih primerih je to optimalna izbira. Kljub temu odgovorimo na vprašanje, katere postavitve je vsak od teh sistemov najbolj primeren za izvajanje.
Flexbox je najbolj primeren za gradnjo postavitev, ki vključujejo poravnavo in porazdelitev elementov v eni vrstici. Primeri te vrste postavitve so poravnava ikon na koncu razdelka ali razporeditev povezav v navigacijski vrstici.
Po drugi strani pa mreža najbolj zasije, ko morate elemente natančno postaviti glede na druge (tako vodoravno kot navpično) in potrebujete ta položaj za preprosto prilagajanje različnim velikostim zaslona.
Za predstavitev je tukaj koda, ki bi jo morali napisati za ponovno ustvarjanje postavitve iz primera mreže s Flexboxom.
HTML:
<razred div="posoda">
<razred div="pod ena">
<div>1</div>
<div>5</div>
</div><razred div="sub dva">
<div>2</div>
</div>
<razred div="pod tri">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.posoda {
obroba: 1px polna črna;
višina: 300px;
}.sub {
zaslon: flex;
širina: 100 %;
}.ena, .trije {
justify-content: presledek-med
}.dva {
justify-content: center;
}
.sub > div {
višina: 100 slikovnih pik;
širina: 100px;
barva ozadja: rdeča;
barva: bela;
velikost pisave: 5rem;
poravnava besedila: sredina;
polmer obrobe: 5px;
}
In tukaj je rezultat:
Glavna stvar, ki jo je treba opozoriti, je, da čeprav ta koda ustvari enak izhod kot primer mreže, je označevanje tukaj bistveno bolj zapleteno. Implementacija te postavitve zahteva podvsebnike, oštevilčene dive pa morate v označbo postaviti po vrstnem redu.
Poleg tega predpostavimo, da ste morali to postavitev premakniti v neroden položaj: recimo poravnati 5. div z 2. div. Če bi za to uporabili Flexbox, bi se morali zateči k položaj: relativno ali kaj podobnega. Če uporabljate Grid, morate samo premakniti mreža-stolpec premoženje.
Nasprotno pa bi implementacija preproste enovrstične poravnave iz primera Flexbox z mrežo povzročila veliko več CSS. Mreža je očitno manj primerna za takšno postavitev.
Čeprav lahko Flexbox in Grid večinoma posnemata učinke drug drugega, obstaja nekaj izjem. Prekrivanje elementov je precej težko samo s Flexboxom, vendar je zelo enostavno z Gridom. Mreža prav tako ne dovoljuje, da bi se elementi oddaljili od drugih elementov z robom: samodejno, kot to počne Flexbox.
Flexbox in Grid sta zmogljiva sistema za postavitev
Flexbox in CSS Grid sta sistema za oblikovanje, ki olajšata postavitev vsebine vaše spletne strani. Mreža je najboljša za dvodimenzionalne postavitve s številnimi elementi, ki morajo biti natančno nameščeni glede na drugega. Flexbox je boljši za enodimenzionalne ali enovrstične postavitve, kjer morate le na določen način razmakniti kup elementov.
