En gedigen förståelse för Flexbox och CSS Grid är nödvändig om du vill bygga fantastiska, responsiva webbplatser.
Om du har skrivit CSS hur länge som helst, är chansen stor att du åtminstone har hört talas om dessa termer. Du kanske till och med har använt en eller båda till viss del. De är båda kraftfulla delar av CSS, med liknande men subtilt olika användningsfall.
Vad är Flexbox?
Flexbox är en endimensionell CSS-layoutmetod som har funnits ett tag nu. Du kan tänka på Flexbox som ett gäng relaterade CSS-egenskaper som du kan använda för att justera HTML-element i en behållare och hantera utrymmet mellan dem.
Innan Flexbox krävde denna typ av layout frustrerande och otymplig användning av flöten och positionsegenskaper.
Om du är orolig för webbläsarstöd för Flexbox, var det inte. Enligt caniuse.com, alla moderna webbläsare stöder Flexbox.
Grunderna i Flexbox
Medan Flexbox innehåller många CSS-egenskaper, grunderna är ganska enkla. Att använda Flexbox börjar alltid med att deklarera en överordnad container som en flex-container genom att lägga till
display: flex till dess stilregler. Om du gör detta blir alla barn till detta element automatiskt flex-objekt.Därefter kan du styra fördelningen av utrymmet i flex-behållaren med hjälp av motivera-innehåll egendom. Du kan styra inriktningen av flex-objekt med align-objekt fast egendom.
Här är ett kodexempel som använder Flexbox för att fördela utrymmet i en behållare jämnt mellan dess barn, och rikta in dem alla i mitten av behållaren. Detta är HTML: en:
<div klass="behållare">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Detta är CSS: en:
.behållare {
display: flex;
bredd: 100%;
motivera-innehåll: space-around;
align-items: center;
kant: 1px helt svart;
höjd: 200px;
}
.behållare > div {
höjd: 100px;
bredd: 100px;
bakgrundsfärg: röd;
färg vit;
teckenstorlek: 5rem;
text-align: center;
border-radie: 5px;
}
Och här är resultatet:
Vad är CSS Grid?
CSS Grid är ett layoutsystem som kompletterar Flexbox. Flexbox är kraftfull, men inte särskilt lämpad för vissa typer av layouter. Att försöka lägga upp strukturen på en hel sida med Flexbox kommer att bli en frustrerande uppgift som involverar ful, icke-sematisk uppmärkning och hackig CSS.
CSS Grid är inte en Flexbox-ersättning, utan snarare ett alternativt system för vissa situationer.
Stödet för CSS Grid är inte riktigt lika omfattande som det är för Flexbox, men Grid är det någorlunda väl understödd år 2022.
Grunderna i CSS Grid
Konceptet med Grid är enkelt. Som namnet antyder låter CSS Grid dig dela upp utrymmet i en överordnad behållare i ett rad-och-kolumn-rutnät, med valfritt antal rader/kolumner du vill. Därefter anger du positionen för de underordnade objekten genom att referera till linjerna i förälderns rutnät.
Börja med att lägga till display: rutnät till föräldrabehållaren. Använd sedan rutnät-mall-rader och rutnät-mall-kolumner egenskaper för att ange de rader och kolumner som du vill dela upp rutnätet i. Du kan sedan använda rutnät-kolumn och rutnätsrad egenskaper på de underordnade elementen för att tala om för dem var i rutnätet de ska vara. Låt oss titta på ett Grid-exempel som använder konfigurationen med fem element från tidigare, men i ett mer komplicerat arrangemang.
Här är HTML: en:
<div klass="behållare">
<div>1</div>
<div klass="två">2</div>
<div klass="tre">3</div>
<div klass="fyra">4</div>
<div klass="fem">5</div>
</div>Här är CSS: en:
.behållare {
display: rutnät;
bredd: 100%;
rutnät-mall-rader: upprepa (3, 1fr);
rutnät-mall-kolumner: upprepa (3, 1fr);
glipa: 0.5rem;
kant: 1px helt svart;
höjd: 300px;
}.behållare > div {
bakgrundsfärg: röd;
färg vit;
teckenstorlek: 5rem;
text-align: center;
border-radie: 5px;
}
.behållare > .två {
rutnätsrad: 2;
rutnät-kolumn: 2;
}
Här är utgången:
CSS Grid innehåller också en hel del andra egenskaper du kan använda för att bygga mer komplexa layouter.
Vilken ska du använda?
Först är det viktigt att notera att ingenting hindrar dig från att använda Flexbox och Grid tillsammans och i vissa fall är det det optimala valet. Som sagt, låt oss svara på frågan om vilka layouter vart och ett av dessa system är mest lämpade att implementera.
Flexbox är bäst lämpad för att bygga layouter som involverar justering och distribution av element på en enda linje. Exempel på den här typen av layout är att justera ikoner i slutet av ett avsnitt eller arrangera länkarna i ett navigeringsfält.
Grid, å andra sidan, lyser starkast när du måste placera element exakt i förhållande till andra (både horisontellt och vertikalt), och du behöver denna positionering för att enkelt anpassa dig till olika skärmstorlekar.
För att demonstrera, här är koden du skulle behöva skriva för att återskapa layouten från Grid-exemplet med Flexbox.
HTML: en:
<div klass="behållare">
<div klass="under ett">
<div>1</div>
<div>5</div>
</div><div klass="under två">
<div>2</div>
</div>
<div klass="under tre">
<div>4</div>
<div>3</div>
</div>
</div>
CSS: en:
.behållare {
kant: 1px helt svart;
höjd: 300px;
}.sub {
display: flex;
bredd: 100%;
}.ett, .tre {
motivera-innehåll: mellanslag-mellan
}.två {
motivera-innehåll: center;
}
.sub > div {
höjd: 100px;
bredd: 100px;
bakgrundsfärg: röd;
färg vit;
teckenstorlek: 5rem;
text-align: center;
border-radie: 5px;
}
Och här är resultatet:
Det viktigaste att notera här är att även om den här koden producerar samma utdata som Grid-exemplet, är uppmärkningen här betydligt mer komplicerad. Implementering av denna layout kräver underbehållare, och du måste placera de numrerade diverna ur funktion i markeringen.
Anta dessutom att du behövde flytta den här layouten till en besvärlig position: säg att justera den 5:e div med den 2:a. Om du hade använt Flexbox för detta skulle du behöva ta till position: relativ eller något liknande. Med Grid behöver du bara flytta rutnät-kolumn fast egendom.
Men att implementera den enkla enkellinjejusteringen från Flexbox-exemplet med Grid skulle dock resultera i mycket mer CSS. Grid är uppenbarligen mindre lämpad för den typen av layout.
Medan Flexbox och Grid mestadels kan replikera varandras effekter, finns det några undantag. Att få element att överlappa är ganska svårt med bara Flexbox men är väldigt enkelt med Grid. Grid tillåter inte heller element att trycka sig bort från andra element med marginal: automatiskt som Flexbox gör.
Flexbox och Grid är kraftfulla layoutsystem
Flexbox och CSS Grid är båda designsystem som gör det enkelt att lägga upp innehållet på din webbsida. Grid är bäst för tvådimensionella layouter med många element som måste placeras exakt i förhållande till varandra. Flexbox är bättre för endimensionella eller enkelradiga layouter där du bara behöver placera ett gäng element på ett visst sätt.