En solid forståelse av Flexbox og CSS Grid er nødvendig hvis du ønsker å bygge fantastiske, responsive nettsider.
Hvis du har skrevet CSS over lengre tid, er sjansen stor for at du i det minste har hørt om disse begrepene. Du kan til og med ha brukt en eller begge til en viss grad. De er begge kraftige deler av CSS, med lignende, men subtilt forskjellige brukstilfeller.
Hva er Flexbox?
Flexbox er en endimensjonal CSS-layoutmetode som har eksistert en stund nå. Du kan tenke på Flexbox som en haug med relaterte CSS-egenskaper du kan bruke til å justere HTML-elementer i en beholder og administrere mellomrommet mellom dem.
Før Flexbox krevde denne typen layout frustrerende og uhåndterlig bruk av flyte- og posisjonsegenskaper.
Hvis du er bekymret for nettleserstøtte for Flexbox, ikke vær det. I følge caniuse.com, alle moderne nettlesere støtter Flexbox.
Grunnleggende om Flexbox
Samtidig som Flexbox inkluderer mange CSS-egenskaper, det grunnleggende er ganske enkelt. Bruk av Flexbox starter alltid med å erklære en overordnet beholder som en flex-beholder ved å legge til
display: flex til stilreglene. Hvis du gjør dette, blir alle barn av dette elementet automatisk fleksible.Etter det kan du kontrollere fordelingen av plass i flex-beholderen ved å bruke rettferdiggjøre-innhold eiendom. Du kan kontrollere justeringen av flex-elementer med align-elementer eiendom.
Her er et kodeeksempel som bruker Flexbox til å fordele plassen i en beholder jevnt mellom barna, og justere dem alle i midten av beholderen. Dette er HTML:
<div klasse="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Dette er CSS:
.container {
display: flex;
bredde: 100 %;
rettferdiggjøre-innhold: plass-rundt;
align-items: center;
kantlinje: 1px helt svart;
høyde: 200px;
}
.container > div {
høyde: 100px;
bredde: 100px;
bakgrunnsfarge: rød;
farge: hvit;
skriftstørrelse: 5rem;
tekst-align: center;
kantradius: 5px;
}
Og her er utgangen:
Hva er CSS Grid?
CSS Grid er et layoutsystem som er komplementært til Flexbox. Flexbox er kraftig, men ikke særlig egnet for visse typer oppsett. Å prøve å legge ut strukturen til en hel side med Flexbox vil ende opp med å bli en frustrerende oppgave som involverer stygg, ikke-sematisk markering og hacky CSS.
CSS Grid er ikke en Flexbox-erstatning, men snarere et alternativt system for enkelte situasjoner.
Støtten for CSS Grid er ikke fullt så omfattende som den er for Flexbox, men Grid er det rimelig godt støttet i 2022.
Grunnleggende om CSS Grid
Konseptet med Grid er enkelt. Som navnet antyder, lar CSS Grid deg dele plassen i en overordnet beholder i et rad-og-kolonne-rutenett, med et hvilket som helst antall rader/kolonner du ønsker. Deretter spesifiserer du posisjonen til de underordnede elementene ved å referere til linjene i det overordnede rutenettet.
Start med å legge til display: rutenett til overordnet container. Bruk deretter rutenett-mal-rader og rutenett-mal-kolonner egenskaper for å spesifisere radene og kolonnene du vil dele rutenettet inn i. Du kan da bruke rutenett-kolonne og rutenett-rad egenskaper på underelementene for å fortelle dem hvor i rutenettet de skal være. La oss se på et Grid-eksempel som bruker fem-element-oppsettet fra før, men i et mer komplisert arrangement.
Her er HTML-en:
<div klasse="container">
<div>1</div>
<div klasse="to">2</div>
<div klasse="tre">3</div>
<div klasse="fire">4</div>
<div klasse="fem">5</div>
</div>Her er CSS:
.container {
display: rutenett;
bredde: 100 %;
rutenett-mal-rader: gjenta (3, 1fr);
rutenett-mal-kolonner: gjenta (3, 1fr);
mellomrom: 0.5rem;
kantlinje: 1px helt svart;
høyde: 300px;
}.container > div {
bakgrunnsfarge: rød;
farge: hvit;
skriftstørrelse: 5rem;
tekst-align: center;
kantradius: 5px;
}
.container > .to {
rutenett-rad: 2;
rutenett-kolonne: 2;
}
Her er utgangen:
CSS Grid inkluderer også en god del andre egenskaper du kan bruke til å bygge mer komplekse oppsett.
Hvilken bør du bruke?
For det første er det viktig å merke seg at ingenting hindrer deg i å bruke Flexbox og Grid sammen, og i noen tilfeller er det det optimale valget. Når det er sagt, la oss svare på spørsmålet om hvilke layouter hvert av disse systemene er best egnet til å implementere.
Flexbox er best egnet til å bygge oppsett som involverer justering og fordeling av elementer på en enkelt linje. Eksempler på denne typen layout er justering av ikoner på slutten av en seksjon, eller å ordne koblingene i en navigasjonslinje.
Grid, derimot, lyser sterkest når du skal plassere elementer nøyaktig i forhold til andre (både horisontalt og vertikalt), og du trenger denne posisjoneringen for å enkelt tilpasse deg ulike skjermstørrelser.
For å demonstrere, her er koden du må skrive for å gjenskape oppsettet fra Grid-eksemplet med Flexbox.
HTML-en:
<div klasse="container">
<div klasse="under én">
<div>1</div>
<div>5</div>
</div><div klasse="under to">
<div>2</div>
</div>
<div klasse="under tre">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
kantlinje: 1px helt svart;
høyde: 300px;
}.under {
display: flex;
bredde: 100 %;
}.en, .tre {
rettferdiggjøre-innhold: mellomrom-mellom
}.to {
rettferdiggjøre-innhold: senter;
}
.under > div {
høyde: 100px;
bredde: 100px;
bakgrunnsfarge: rød;
farge: hvit;
skriftstørrelse: 5rem;
tekst-align: center;
kantradius: 5px;
}
Og her er utgangen:
Det viktigste å merke seg her er at selv om denne koden produserer samme utgang som Grid-eksemplet, er markeringen her betydelig mer komplisert. Implementering av dette oppsettet krever underbeholdere, og du må plassere de nummererte divene ute av drift i markeringen.
Videre, anta at du trengte å flytte denne layouten til en vanskelig posisjon: si å justere den 5. div med den andre. Hvis du hadde brukt Flexbox til dette, måtte du ty til stilling: pårørende eller noe lignende. Ved å bruke Grid er alt du trenger å skifte rutenett-kolonne eiendom.
Men i motsetning til dette vil implementering av den enkle enkeltlinjejusteringen fra Flexbox-eksemplet med Grid resultere i mye mer CSS. Grid er åpenbart mindre egnet for den slags layout.
Mens Flexbox og Grid stort sett kan replikere hverandres effekter, er det noen unntak. Å få elementer til å overlappe er ganske vanskelig med bare Flexbox, men det er veldig enkelt med Grid. Grid tillater heller ikke elementer å presse seg bort fra andre elementer med margin: automatisk slik Flexbox gjør.
Flexbox og Grid er kraftige layoutsystemer
Flexbox og CSS Grid er begge designsystemer som gjør det enkelt å legge ut innholdet på nettsiden din. Rutenett er best for todimensjonale oppsett med mange elementer som må plasseres nøyaktig i forhold til hverandre. Flexbox er bedre for endimensjonale eller enkeltlinjede layouter der du bare trenger å plassere en haug med elementer på en bestemt måte.