Snabbt! Vad är Skillnaden Mellan Flexbox och Nätet?

0
54

Låt oss gå rapid fire och försök att besvara denna fråga med snabba punkter snarare än långa förklaringar. Det finns en hel del likheter mellan flexbox och rutnät, som börjar med det faktum att de används för layout och mycket mer kraftfull än någon layout teknik som kom före dem. De kan sträcka ut sig och krympa, kan de center saker, de kan ändra ordning på saker och ting, de kan anpassa saker… Det finns massor av layout situationer som du kan använda antingen en att göra vad vi behöver göra, och massor av situationer där man är mer lämpad än den andra. Låt oss fokusera på de skillnader snarare än likheter:

Flexbox kan valfritt wrap. Om vi tillåter en flex behållare till en wrap, kommer de att svepa ner på en annan rad när flex poster fylla en rad. Där de radas upp på nästa rad är oberoende av vad happenned på första raden, så för en murad-liknande utseende.

Nätet kan även wrap (om vi tillåter automatisk fyllning) i den meningen att de poster som kan fylla en rad och flytta till ny rad (eller auto placera sig själva), men som de gör, de kommer att falla längs samma linjer i alla andra delar gör.

Flexbox på topp, gallret på botten

Du kan tänka flexbox som “endimensionella.” Medan flexbox kan göra rader och kolumner i den meningen att det gör delar till linda, det finns inget sätt att declaratively kontroll där delar sluta eftersom de delar bara skjuta längs en gemensam axel och sedan sjal eller wrap inte detta. De gör som de gör, om du kommer, tillsammans med en en-dimensionella planet, och det är på grund av denna enda dimension som vi kan välja att göra saker, som att anpassa delar längs en baseline — vilket är något nätet är oförmögna att göra.

.förälder {
display: flex;
flex-flöde: rad wrap; /* OK element, gå så långt du kan på en rad, så wrap som du ser fit */
}

Du kan tänka på nätet som “två dimensioner i att vi (om vi vill) förklara dimensionering av rader och kolumner, och då uttryckligen placera saker i både rader och kolumner som vi väljer.

.förälder {
display: nätet.
grid-template-kolumner: 3fr 1fr; /* Två kolumner, en tre gånger så bred som den andra */
grid-template-rader: 200px auto 100px; /* Tre kolumner, två med erotiska bredder */
grid-template-områden:
“huvud huvud huvud”
“main . sidebar”
“footer sidfot sidfot”;
}

/*
Nu kan vi uttryckligen placera objekt i definitionen rader och kolumner.
*/
.barn-1 {
grid-område: – header,
}

.barn-2 {
grid-område: main;
}

.barn-3 {
grid-område: sidofält;
}

.barn-4 {
grid-område: sidfot;
}

Flexbox på topp, gallret på botten

Jag är inte världens största fan av “1D” vs. “2D” differentiering av nätet vs flexbox, bara för att jag tycker de flesta av mina dag-till-dag-användning av nätet är “1D” – och det är bra för det. Jag skulle inte vilja att någon tror att de har att använda flexbox och inte nätet eftersom nätet är bara när du behöver 2D. Det är en stor skillnad även om den 2D-layout som är möjligt med nätet men på ett sätt är det inte i flexbox.

Nätet är oftast definieras på det överordnade elementet. I flexbox, de flesta av layout (bortom grunderna) att hända på barn.

/*
Flex barn göra det mesta av arbetet
*/
.flexbox {
display: flex;
> div {
&:nth-child(1) { // logotyp
flex: 0 0 100px;
}
&:nth-child(2) { // sök
flex: 1;
max-width: 500px;
}
&:nth-child(3) { // avatar
flex: 0 0 50px;
margin-left: auto;
}
}
}

/*
Nätet förälder gör det mesta av arbetet
*/
.grid {
display: nätet.
grid-template-kolumner: 1fr auto minmax(100px, 1fr) 1fr;
grid-template-rader: 100px upprepa(3, auto) 100px;
grid-gap: 10px;
}

Nätet är bättre på att överlappande. Få delar överlappar i flexbox kräver att man ser på traditionella saker, som att negativa marginaler, omvandlar, eller absolut positionering i syfte att bryta sig ut ur flex beteende. Med nätet, kan vi placera objekt på överlappande linjer, eller ens rätt att inom exakt samma rutnät av celler.

Flexbox på topp, gallret på botten

Nätet är kraftigare. Medan böjning av flexbox är ibland det är styrka, det sätt som en flex objektet är dimensionerad blir ganska komplicerat. Det är en kombination av bredd, min bredd, max bredd, flex-grund -, flex-växa, och flex-krympa, för att inte tala om innehållet inuti och saker som white-space, liksom andra poster i samma rad. Nätet har intressanta rymden ockuperar funktioner, som fraktionerad enheter, och möjligheten för innehåll för att bryta nät, men vi är i stort sett ställa upp linjerna och placera objekt inom dem som plopp rätt på plats.

Flexbox kan driva bort saker. Det är en ganska unik funktion i flexbox att du kan, till exempel, sätta margin-right: auto; på ett element och, om det finns utrymme, det elementet kommer att driva allt annat lika långt bort som det kan gå.

Här är några av mina favorit-tweets på ämnet:

flexbox ser ut som det gör vad du vill
men nätet är oftast vad du vill

— Gamla Gardet Rupert (@davatron5000) januari 25, 2019

Nätet gör faktiska kolumner och rader. Innehållet kommer att rada upp från den ena till den andra, som du ber den. Flexbox inte. Inte bara i den andra dimensionen (vilket är lättast att tala om), men också i den första dimensionen. Flexbox är inte för de flesta av de saker vi har använt det för.

— Jen Simmons (@jensimmons) januari 26, 2019

Vad sägs om det här:#Flexbox är för anpassningen. #CSSGrid är för layout.

Detta är nästan alltid hur jag hamnar att använda dem. Det gör det möjligt för dem att bevara sina relationer till varandra. Det gör också att varje användas för sin styrka, även om alla kan göra en annan sak.

— Brian Haferkamp (@BrianHaferkamp) Januari 25, 2019

Om du börjar begränsande alla dina flex objekt med en bredd, då mer ofta än inte det kommer att vara lättare att använda nätet.

— Rachel Andrew (@rachelandrew) januari 25, 2019

Här är en annan skillnad, men det är inte en favorit sätt att beskriva dem, bara kul dum kunskap:

flexbox tar 2 går till avslut
nätet tar 3

så man skulle kunna säga att nätet är långsam och flexbox är snabb lol

— Adam Argyle (@argyleink) januari 25, 2019

För mig Elnätet är det till stor full layout..nät…med mer kontroll över hur det hela är/sidan kommer tillsammans, medan flexbox hjälper mig att rikta och anpassa (oavsett om det är i ett rutnät eller inte).

För mig handlar det om syfte.

— Mandy Michael (@Mandy_Kerr) Januari 25, 2019

Skillnaden mellan de två är ofta suddig, speciellt nu när vi också har “lucka” för flexbox. Grid är bäst lämpad för ett fåtal specifika användningsfall (2D naturligtvis, men även saker som överlappande element) medan flexbox oftast lyser i enklare men ändå gemensamma krav på layout.

— Benjamin De Cock (@bdc) januari 25, 2019

Använda rutnätet när du redan har layouten struktur i åtanke, och flex när du bara vill att allt ska passa. Layouten först vs innehåll först.

— Beverly (@aszenitha) januari 25, 2019