Flexboxin ja CSS Gridin vankka ymmärtäminen on välttämätöntä, jos haluat rakentaa upeita, reagoivia verkkosivustoja.
Jos olet kirjoittanut CSS: ää jonkin aikaa, on todennäköistä, että olet ainakin kuullut näistä termeistä. Olet ehkä jopa käyttänyt toista tai molempia jossain määrin. Molemmat ovat CSS: n tehokkaita osia, joilla on samanlaiset mutta hienovaraisesti erilaiset käyttötapaukset.
Mikä on Flexbox?
Flexbox on yksiulotteinen CSS-asettelumenetelmä, joka on ollut käytössä jo jonkin aikaa. Voit ajatella Flexboxia joukkona toisiinsa liittyviä CSS-ominaisuuksia, joiden avulla voit kohdistaa HTML-elementtejä säilöön ja hallita niiden välistä tilaa.
Ennen Flexboxia tämäntyyppinen asettelu vaati turhauttavaa ja raskasta kellukkeen ja sijainnin ominaisuudet.
Jos olet huolissasi Flexboxin selaimen tuesta, älä ole huolissasi. Mukaan caniuse.com, kaikki nykyaikaiset selaimet tukevat Flexboxia.
Flexboxin perusteet
Sillä aikaa Flexbox sisältää monia CSS-ominaisuuksia, perusasiat ovat melko yksinkertaisia. Flexboxin käyttö alkaa aina ilmoittamalla pääsäiliö flex-containeriksi lisäämällä
näyttö: flex tyylisääntöihinsä. Tämän tekeminen tekee kaikista tämän elementin lapsista automaattisesti joustavia kohteita.Tämän jälkeen voit ohjata tilan jakautumista flex-säiliössä käyttämällä perustelusisällön omaisuutta. Voit hallita flex-kohteiden kohdistusta kohdista-kohteet omaisuutta.
Tässä on esimerkki koodista, joka käyttää Flexboxia jakaakseen tilan säiliössä tasaisesti lastensa kesken ja kohdistamaan ne kaikki säilön keskelle. Tämä on HTML:
<div class="kontti">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Tämä on CSS:
.container {
näyttö: flex;
leveys: 100 %;
perustele-sisältö: space-around;
kohdista kohteet: keskellä;
reuna: 1px tasainen musta;
korkeus: 200px;
}
.container > div {
korkeus: 100px;
leveys: 100 pikseliä;
taustaväri: punainen;
väri valkoinen;
font-koko: 5rem;
tekstin tasaus: keskellä;
reunan säde: 5px;
}
Ja tässä tulos:
Mikä on CSS Grid?
CSS Grid on asettelujärjestelmä, joka täydentää Flexboxia. Flexbox on tehokas, mutta ei kovin sopiva tietyntyyppisiin asetteluihin. Koko sivun rakenteen yrittäminen Flexboxilla on turhauttava tehtävä, johon liittyy rumaa, ei-semaattista merkintää ja hakkeroitua CSS: ää.
CSS Grid ei ole Flexboxin korvaaja, vaan vaihtoehtoinen järjestelmä joihinkin tilanteisiin.
CSS Gridin tuki ei ole aivan yhtä laaja kuin Flexboxille, mutta Grid on kohtuullisen hyvin tuettu vuonna 2022.
CSS Gridin perusteet
Grid-konsepti on yksinkertainen. Kuten nimestä voi päätellä, CSS Grid antaa sinun jakaa ylätason säilön tilan rivi- ja sarakeruudukoksi haluamallasi määrällä rivejä/sarakkeita. Tämän jälkeen määrität alikohteiden sijainnin viittaamalla ylätason ruudukon riveihin.
Aloita lisäämällä näyttö: ruudukko ylätason säilöön. Käytä sitten ruudukko-malli-rivit ja ruudukko-malli-sarakkeet ominaisuudet määrittääksesi rivit ja sarakkeet, joihin haluat jakaa ruudukon. Voit sitten käyttää ruudukko-sarake ja ruudukko-rivi alielementtien ominaisuudet kertomaan heille, missä ruudukossa niiden pitäisi olla. Katsotaanpa esimerkkiä Gridistä, joka käyttää viiden elementin kokoonpanoa aikaisemmasta, mutta monimutkaisemmassa järjestelyssä.
Tässä on HTML:
<div class="kontti">
<div>1</div>
<div class="kaksi">2</div>
<div class="kolme">3</div>
<div class="neljä">4</div>
<div class="viisi">5</div>
</div>Tässä CSS:
.container {
näyttö: ruudukko;
leveys: 100 %;
grid-template-rows: toista (3, 1fr);
grid-template-columns: toista (3, 1fr);
aukko: 0.5 rem;
reuna: 1px tasainen musta;
korkeus: 300px;
}.container > div {
taustaväri: punainen;
väri valkoinen;
font-koko: 5rem;
tekstin tasaus: keskellä;
reunan säde: 5px;
}
.container > .kaksi {
ruudukkorivi: 2;
ruudukko-sarake: 2;
}
Tässä tulos:
CSS Grid sisältää myös paljon muita ominaisuuksia, joita voit käyttää monimutkaisempien asettelujen rakentamiseen.
Kumpaa sinun pitäisi käyttää?
Ensinnäkin on tärkeää huomata, että mikään ei estä sinua käyttämästä Flexboxia ja Gridiä yhdessä, ja joissakin tapauksissa se on optimaalinen valinta. Vastataan kuitenkin kysymykseen, mitkä asettelut kukin näistä järjestelmistä soveltuu parhaiten toteutettaviksi.
Flexbox sopii parhaiten rakennuksiin, joissa elementtejä kohdistetaan ja jaetaan yhdelle riville. Esimerkkejä tällaisesta asettelusta ovat osion lopussa olevien kuvakkeiden kohdistaminen tai linkkien järjestäminen navigointipalkkiin.
Grid puolestaan loistaa kirkkaimmin, kun elementit on sijoitettava tarkasti suhteessa muihin (sekä vaaka- että pystysuunnassa), ja tarvitset tämän sijainnin mukautuaksesi helposti eri näyttökokoihin.
Havainnollistaaksesi tässä on koodi, joka sinun on kirjoitettava luodaksesi asettelun uudelleen Grid-esimerkistä Flexboxilla.
HTML:
<div class="kontti">
<div class="ala yksi">
<div>1</div>
<div>5</div>
</div><div class="ala kaksi">
<div>2</div>
</div>
<div class="ala kolme">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
reuna: 1px tasainen musta;
korkeus: 300px;
}.sub {
näyttö: flex;
leveys: 100 %;
}.yksi, .kolme {
perustella-sisältö: välilyönti
}.kaksi {
perustella-sisältö: keskus;
}
.sub > div {
korkeus: 100px;
leveys: 100 pikseliä;
taustaväri: punainen;
väri valkoinen;
font-koko: 5rem;
tekstin tasaus: keskellä;
reunan säde: 5px;
}
Ja tässä tulos:
Tärkeintä tässä on huomata, että vaikka tämä koodi tuottaa saman tulosteen kuin Grid-esimerkki, merkintä tässä on huomattavasti monimutkaisempi. Tämän asettelun toteuttaminen vaatii alisäilöjä, ja sinun on sijoitettava numeroidut divit epäjärjestykseen merkinnöissä.
Oletetaan lisäksi, että sinun on siirrettävä tämä asettelu hankalaan asentoon: sanotaan, että 5. div on kohdistettava 2. divaan. Jos olisit käyttänyt Flexboxia tähän, sinun on turvauduttava asema: suhteellinen tai jotain vastaavaa. Gridin avulla sinun tarvitsee vain siirtää ruudukko-sarake omaisuutta.
Mutta sitä vastoin Flexbox-esimerkin yksinkertaisen yhden rivin kohdistuksen toteuttaminen Gridillä johtaisi paljon enemmän CSS: ään. Grid sopii selvästi vähemmän sellaiseen asetteluun.
Vaikka Flexbox ja Grid voivat enimmäkseen kopioida toistensa tehosteita, on joitain poikkeuksia. Elementtien tekeminen päällekkäin on melko vaikeaa vain Flexboxilla, mutta se on erittäin helppoa Gridillä. Grid ei myöskään salli elementtien työntää itseään pois muista elementeistä marginaalilla: automaattinen Flexboxin tapaan.
Flexbox ja Grid ovat tehokkaita asettelujärjestelmiä
Flexbox ja CSS Grid ovat molemmat suunnittelujärjestelmiä, jotka tekevät verkkosivusi sisällön asettelun helpoksi. Ruudukko sopii parhaiten kaksiulotteisiin asetteluihin, joissa on monia elementtejä, jotka on sijoitettava tarkasti toisiinsa nähden. Flexbox sopii paremmin yksiulotteisiin tai yksirivisiin asetteluihin, joissa sinun tarvitsee vain sijoittaa joukko elementtejä tietyllä tavalla.