Een goed begrip van Flexbox en CSS Grid is noodzakelijk als u verbluffende, responsieve websites wilt bouwen.
Als je al een tijdje CSS schrijft, is de kans groot dat je op zijn minst van deze termen hebt gehoord. Misschien heb je zelfs een of beide tot op zekere hoogte gebruikt. Het zijn beide krachtige onderdelen van CSS, met vergelijkbare maar subtiel verschillende use-cases.
Wat is FlexBox?
Flexbox is een eendimensionale CSS-lay-outmethode die al een tijdje bestaat. U kunt Flexbox zien als een aantal gerelateerde CSS-eigenschappen die u kunt gebruiken om HTML-elementen in een container uit te lijnen en de ruimte ertussen te beheren.
Vóór Flexbox vereiste dit type lay-out een frustrerend en log gebruik van de vlotter en positie eigenschappen.
Als u zich zorgen maakt over browserondersteuning voor Flexbox, hoeft u zich geen zorgen te maken. Volgens caniuse.com, ondersteunen alle moderne browsers Flexbox.
De basisprincipes van Flexbox
Terwijl Flexbox bevat veel CSS-eigenschappen, de basis is vrij eenvoudig. Het gebruik van Flexbox begint altijd met het declareren van een parent-container als flex-container door toe te voegen
weergave: flex aan zijn stijlregels. Hierdoor worden automatisch alle kinderen van dit element flex-items.Daarna kunt u de ruimteverdeling binnen de flexcontainer regelen met behulp van de de eigenschap rechtvaardigen-inhoud. U kunt de uitlijning van flex-items regelen met de uitlijnen-items eigendom.
Hier is een codevoorbeeld dat Flexbox gebruikt om de ruimte in een container gelijkmatig te verdelen over de kinderen en ze allemaal in het midden van de container uit te lijnen. Dit is de HTML:
<div klasse="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Dit is de CSS:
.container {
weergeven: flex;
breedte: 100%;
rechtvaardigen-inhoud: ruimte-rond;
items uitlijnen: centreren;
rand: 1px effen zwart;
hoogte: 200px;
}
.container > div {
hoogte: 100px;
breedte: 100px;
achtergrondkleur: rood;
kleur wit;
lettergrootte: 5rem;
tekst uitlijnen: centreren;
grensstraal: 5px;
}
En hier is de uitvoer:
Wat is CSS-raster?
CSS Grid is een lay-outsysteem dat complementair is aan Flexbox. Flexbox is krachtig, maar niet erg geschikt voor bepaalde soorten lay-outs. Proberen de structuur van een hele pagina op te maken met Flexbox zal uiteindelijk een frustrerende taak worden met lelijke, niet-sematische opmaak en hacky CSS.
CSS Grid is geen Flexbox-vervanging, maar eerder een alternatief systeem voor sommige situaties.
De ondersteuning voor CSS Grid is niet zo uitgebreid als voor Flexbox, maar Grid wel redelijk ondersteund in 2022.
De basisprincipes van CSS Grid
Het concept van Grid is eenvoudig. Zoals de naam al doet vermoeden, kunt u met CSS Grid de ruimte in een bovenliggende container verdelen in een rij-en-kolommenraster, met elk gewenst aantal rijen/kolommen. Daarna specificeert u de positie van de onderliggende items door te verwijzen naar de lijnen van het bovenliggende raster.
Begin met toevoegen weergave: raster naar de bovenliggende container. Gebruik dan de grid-template-rijen En raster-sjabloon-kolommen eigenschappen om de rijen en kolommen op te geven waarin u het raster wilt splitsen. U kunt dan gebruik maken van de rooster-kolom En raster-rij eigenschappen op de onderliggende elementen om ze te vertellen waar ze in het raster moeten zijn. Laten we eens kijken naar een Grid-voorbeeld dat de opstelling met vijf elementen van vroeger gebruikt, maar in een meer gecompliceerde opstelling.
Hier is de HTML:
<div klasse="container">
<div>1</div>
<div klasse="twee">2</div>
<div klasse="drie">3</div>
<div klasse="vier">4</div>
<div klasse="vijf">5</div>
</div>Hier is de CSS:
.container {
weergave: raster;
breedte: 100%;
grid-template-rijen: herhaal (3, 1fr);
raster-sjabloon-kolommen: herhalen (3, 1fr);
gat: 0.5rem;
rand: 1px effen zwart;
hoogte: 300px;
}.container > div {
achtergrondkleur: rood;
kleur wit;
lettergrootte: 5rem;
tekst uitlijnen: centreren;
grensstraal: 5px;
}
.container > .twee {
rasterrij: 2;
rasterkolom: 2;
}
Dit is de uitvoer:
CSS Grid bevat ook veel andere eigenschappen die u kunt gebruiken om complexere lay-outs te maken.
Welke moet je gebruiken?
Ten eerste is het belangrijk op te merken dat niets u ervan weerhoudt om Flexbox en Grid samen te gebruiken en in sommige gevallen is dat de optimale keuze. Dat gezegd hebbende, laten we de vraag beantwoorden welke lay-outs elk van deze systemen het meest geschikt is om te implementeren.
Flexbox is het meest geschikt voor het bouwen van lay-outs waarbij elementen op één lijn moeten worden uitgelijnd en verdeeld. Voorbeelden van dit soort lay-out zijn het uitlijnen van pictogrammen aan het einde van een sectie of het rangschikken van de links in een navigatiebalk.
Raster schijnt daarentegen het helderst wanneer je elementen precies moet positioneren ten opzichte van andere (zowel horizontaal als verticaal), en je hebt deze positionering nodig om je gemakkelijk aan verschillende schermformaten aan te passen.
Om te demonstreren, hier is de code die u zou moeten schrijven om de lay-out van het Grid-voorbeeld opnieuw te maken met Flexbox.
De HTML:
<div klasse="container">
<div klasse="onder één">
<div>1</div>
<div>5</div>
</div><div klasse="sub twee">
<div>2</div>
</div>
<div klasse="onder drie">
<div>4</div>
<div>3</div>
</div>
</div>
De CSS:
.container {
rand: 1px effen zwart;
hoogte: 300px;
}.sub {
weergeven: flex;
breedte: 100%;
}.een, .drie {
rechtvaardigen-inhoud: spatie-tussen
}.twee {
rechtvaardigen-inhoud: centrum;
}
.sub > div {
hoogte: 100px;
breedte: 100px;
achtergrondkleur: rood;
kleur wit;
lettergrootte: 5rem;
tekst uitlijnen: centreren;
grensstraal: 5px;
}
En hier is de uitvoer:
Het belangrijkste om hier op te merken is dat hoewel deze code dezelfde uitvoer produceert als het Grid-voorbeeld, de opmaak hier aanzienlijk ingewikkelder is. Het implementeren van deze lay-out vereist subcontainers en u moet de genummerde div's in de verkeerde volgorde in de opmaak plaatsen.
Ga er verder van uit dat u deze lay-out in een ongemakkelijke positie moest plaatsen: bijvoorbeeld het uitlijnen van de 5e div met de 2e. Als je hiervoor Flexbox had gebruikt, zou je je toevlucht moeten nemen tot positie: relatief of iets dergelijks. Met behulp van Grid hoeft u alleen maar de rooster-kolom eigendom.
Maar het implementeren van de eenvoudige enkele regeluitlijning uit het Flexbox-voorbeeld met Grid zou daarentegen resulteren in veel meer CSS. Grid is natuurlijk minder geschikt voor dat soort lay-out.
Hoewel Flexbox en Grid grotendeels elkaars effecten kunnen repliceren, zijn er enkele uitzonderingen. Elementen laten overlappen is behoorlijk moeilijk met alleen Flexbox, maar is heel eenvoudig met Grid. Grid staat ook niet toe dat elementen zichzelf wegduwen van andere elementen met marge: automatisch zoals Flexbox dat doet.
Flexbox en Grid zijn krachtige lay-outsystemen
Flexbox en CSS Grid zijn beide ontwerpsystemen die het opmaken van uw webpagina-inhoud eenvoudig maken. Raster is het beste voor tweedimensionale lay-outs met veel elementen die precies ten opzichte van elkaar moeten worden gepositioneerd. Flexbox is beter voor eendimensionale of enkellijnige lay-outs waarbij u slechts een aantal elementen op een bepaalde manier moet plaatsen.