En solid forståelse af Flexbox og CSS Grid er nødvendig, hvis du vil bygge fantastiske, responsive hjemmesider.
Hvis du har skrevet CSS i længere tid, er chancerne gode for, at du i det mindste har hørt om disse udtryk. Du har måske endda brugt den ene eller begge til en vis grad. De er begge kraftfulde dele af CSS, med lignende, men subtilt forskellige anvendelsestilfælde.
Hvad er Flexbox?
Flexbox er en endimensionel CSS-layoutmetode, der har eksisteret i et stykke tid nu. Du kan tænke på Flexbox som en masse relaterede CSS-egenskaber, du kan bruge til at justere HTML-elementer i en container og administrere mellemrummet mellem dem.
Før Flexbox krævede denne type layout frustrerende og uhåndterlig brug af flyderen og position egenskaber.
Hvis du er bekymret for browserunderstøttelse af Flexbox, skal du ikke være det. Ifølge caniuse.com, alle moderne browsere understøtter Flexbox.
Det grundlæggende i Flexbox
Mens Flexbox indeholder mange CSS-egenskaber, det grundlæggende er ret simpelt. Brug af Flexbox starter altid med at erklære en overordnet container som en flex-container ved at tilføje
display: flex til dens stilregler. Hvis du gør dette, bliver alle børn af dette element automatisk fleksible.Derefter kan du styre fordelingen af plads i flex-beholderen ved hjælp af retfærdiggøre-indhold ejendom. Du kan kontrollere justeringen af flex-elementer med align-elementer ejendom.
Her er et kodeeksempel, der bruger Flexbox til at fordele pladsen i en container jævnt mellem dens børn og justere dem alle i midten af containeren. Dette er HTML:
<div klasse="beholder">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Dette er CSS:
.beholder {
display: flex;
bredde: 100%;
retfærdiggøre-indhold: rum-omkring;
align-items: center;
kant: 1px ensfarvet sort;
højde: 200px;
}
.beholder > div {
højde: 100px;
bredde: 100px;
baggrundsfarve: rød;
farve: hvid;
skriftstørrelse: 5rem;
tekst-align: center;
kant-radius: 5px;
}
Og her er outputtet:
Hvad er CSS Grid?
CSS Grid er et layoutsystem, der er komplementært til Flexbox. Flexbox er kraftfuld, men ikke særlig velegnet til visse typer layout. At prøve at lægge strukturen på en hel side med Flexbox vil ende med at blive en frustrerende opgave, der involverer grim, ikke-sematisk opmærkning og hacket CSS.
CSS Grid er ikke en Flexbox-erstatning, men snarere et alternativt system til nogle situationer.
Supporten til CSS Grid er ikke helt så omfattende, som den er til Flexbox, men Grid er det rimelig godt understøttet i 2022.
Det grundlæggende i CSS Grid
Konceptet med Grid er enkelt. Som navnet antyder, giver CSS Grid dig mulighed for at opdele rummet i en overordnet container i et række-og-kolonne-gitter med et hvilket som helst antal rækker/kolonner, du kan lide. Derefter angiver du placeringen af de underordnede elementer ved at henvise til linjerne i det overordnede gitter.
Start med at tilføje display: gitter til forældrebeholderen. Brug derefter gitter-skabelon-rækker og gitter-skabelon-kolonner egenskaber for at angive de rækker og kolonner, du vil opdele gitteret i. Du kan derefter bruge gitter-kolonne og gitterrække egenskaber på de underordnede elementer for at fortælle dem, hvor i gitteret de skal være. Lad os se på et Grid-eksempel, der bruger fem-element-opsætningen fra før, men i et mere kompliceret arrangement.
Her er HTML:
<div klasse="beholder">
<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'en:
.beholder {
display: gitter;
bredde: 100%;
gitter-skabelon-rækker: gentag (3, 1fr);
gitter-skabelon-kolonner: gentag (3, 1fr);
hul: 0.5rem;
kant: 1px ensfarvet sort;
højde: 300px;
}.beholder > div {
baggrundsfarve: rød;
farve: hvid;
skriftstørrelse: 5rem;
tekst-align: center;
kant-radius: 5px;
}
.beholder > .to {
gitter-række: 2;
gitter-kolonne: 2;
}
Her er outputtet:
CSS Grid indeholder også en hel del andre egenskaber, du kan bruge til at bygge mere komplekse layouts.
Hvilken skal du bruge?
For det første er det vigtigt at bemærke, at intet forhindrer dig i at bruge Flexbox og Grid sammen, og i nogle tilfælde er det det optimale valg. Når det er sagt, lad os besvare spørgsmålet om, hvilke layouter hvert af disse systemer er mest egnede til at implementere.
Flexbox er bedst egnet til at bygge layouts, der involverer justering og fordeling af elementer på en enkelt linje. Eksempler på denne form for layout er justering af ikoner i slutningen af et afsnit eller indretning af links i en navigationslinje.
Grid derimod lyser stærkest, når du skal placere elementer præcist i forhold til andre (både vandret og lodret), og du har brug for denne positionering for nemt at tilpasse dig forskellige skærmstørrelser.
For at demonstrere er her den kode, du skal skrive for at genskabe layoutet fra Grid-eksemplet med Flexbox.
HTML:
<div klasse="beholder">
<div klasse="under ét">
<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:
.beholder {
kant: 1px ensfarvet sort;
højde: 300px;
}.sub {
display: flex;
bredde: 100%;
}.en, .tre {
retfærdiggøre-indhold: mellemrum-mellem
}.to {
retfærdiggøre-indhold: center;
}
.sub > div {
højde: 100px;
bredde: 100px;
baggrundsfarve: rød;
farve: hvid;
skriftstørrelse: 5rem;
tekst-align: center;
kant-radius: 5px;
}
Og her er outputtet:
Det vigtigste at bemærke her er, at selvom denne kode producerer det samme output som Grid-eksemplet, er opmærkningen her betydeligt mere kompliceret. Implementering af dette layout kræver undercontainere, og du skal placere de nummererede div'er ude af rækkefølge i markeringen.
Antag desuden, at du var nødt til at flytte dette layout til en akavet position: f.eks. at justere den 5. div med den 2. Hvis du havde brugt Flexbox til dette, skulle du ty til stilling: relativ eller noget lignende. Ved at bruge Grid er alt hvad du behøver at flytte gitter-kolonne ejendom.
Men i modsætning hertil ville implementering af den simple enkeltlinjejustering fra Flexbox-eksemplet med Grid resultere i meget mere CSS. Grid er åbenbart mindre egnet til den slags layout.
Mens Flexbox og Grid for det meste kan kopiere hinandens effekter, er der nogle undtagelser. At få elementer til at overlappe er ret svært med kun Flexbox, men det er meget nemt med Grid. Grid tillader heller ikke, at elementer skubber sig væk fra andre elementer med margin: automatisk, som Flexbox gør.
Flexbox og Grid er kraftfulde layoutsystemer
Flexbox og CSS Grid er begge designsystemer, der gør det nemt at udforme indholdet på din webside. Grid er bedst til todimensionelle layouts med mange elementer, der skal placeres præcist i forhold til hinanden. Flexbox er bedre til en-dimensionelle eller single-line layouts, hvor du bare skal placere en masse elementer på en bestemt måde.
