Endnu mere om, hvordan Flexbox fungerer - forklaret i store, farverige, animerede gifs

Sidste gang vi kom i gang med de grundlæggende Flexbox-egenskaber: flexretning, retfærdiggør indhold, justering af genstande og justering af mig selv.

Disse kommandoer er effektive til at oprette grundlæggende layouts. Men når du begynder at bygge websider med Flexbox, skal du gå dybere for at maksimere dets potentiale.

Lad os nu kigge dybt ind i Flexbox-størrelsen - og hvordan du kan udnytte den til at opbygge tilpasningsdygtige og smukke layouts.

Egenskab nr. 1: Flex-basis

I den sidste artikel kiggede vi for det meste på egenskaber, der gælder for containerelementer. Denne gang undersøger vi udelukkende størrelsen anvendt på børnelementer.

Vores første egenskab er efter min mening en af ​​de mindst godt forklarede egenskaber i Flexbox-tutorials.

Men - rolig. Det er faktisk ganske ligetil.

Flex-basis styrer standardstørrelsen på et element, før det manipuleres af andre Flexbox-egenskaber (mere om det senere).

I nedenstående GIF betyder det, at det kan udskiftes med breddeegenskapen:

Hvad der dog gør flex-basis unikt fra bredden, er, at det svarer til vores gode ol-flex-akser:

Fleksibasis påvirker et elements størrelse på tværs af hovedaksen.

Lad os se, hvad der sker, når vi holder vores flex-basis det samme, men skift retning af vores hovedakse:

Bemærk, at vi var nødt til at skifte fra manuelt at indstille højden til indstilling af bredden. Flex-basis bestemmer således skiftevis bredde eller højde, afhængigt af flex-retning.

Egenskab nr. 2: Flex Grow

Nu vil vi blive lidt mere komplekse.

Lad os først indstille alle vores firkanter til samme bredde, 120px:

Når det kommer til egenskaben kaldet flex-grow, er standardindstillingen 0. Det betyder, at firkanterne ikke må vokse for at optage pladsen i containeren.

Hvad betyder det? Lad os prøve at øge flex-vokse til 1 for hver firkant:

Firkanterne optager samlet hele bredden af ​​containeren, hvor pladsen er jævnt fordelt mellem dem. Værdien for flex-vokse tilsidesætter bredden.

Den forvirrende del om flex-grow er imidlertid hvad værdien faktisk betyder. Hvad betyder flex-grow: 1 indebærer faktisk?

Nå, her ser det ud, hvis vi indstiller flex-growth for hver firkant til 999:

Det er ... nøjagtigt det samme.

Det skyldes, at flex-grow ikke er en absolut værdi - det er en relativ værdi.

Det, der betyder noget, er ikke, hvad kvadratets flex-Grow-værdi er alene, men hvad det er i forhold til de andre firkanter.

Hvis vi indstiller hver firkant til at flex-vokse: 1 og derefter justere Square # 3's flex-grow, så ser vi ændringerne:

For virkelig at forstå, hvad der foregår her, lad os tage en hurtig omvej til noget (simpelt) matematik.

Hver firkant starter med en flex-vokse på 1. Hvis vi tilføjer flex-voksen for hver firkant, er vores samlede antal seks. Beholderen er således opdelt i 6 separate sektioner. Hver firkant vokser til at udfylde 1/6 af den tilgængelige plads i beholderen.

Når vi indstiller flex-Grow af Square nr. 3 til 2, er beholderen nu opdelt i 7 forskellige sektioner, da det samlede antal flex-grow-egenskaber er 1 + 1 + 2 + 1 + 1 + 1.

Plads nr. 3 får derefter 2/7 af den plads, og resten får 1/7.

Når vi går til flex-grow: 3 for Square # 3, er containeren opdelt i 8 sektioner (1 + 1 + 3 + 1 + 1 + 1) og Square # 3 får 3/8, og resten får 1/8 .

Og så videre.

Fleksivækst handler om proportioner. Hvis vi indstiller hver firkant til flex-growth: 4 og square # 3 til flex-grow: 12, får vi det samme resultat, som om det var henholdsvis 1 og 3:

Det, der betyder noget, er, hvad hver firkantes flex-grow er proportional med de andre.

Som en sidste note skal du huske, at ligesom flex-basis, flex-grow gælder på tværs af hovedaksen. Vores firkanter vokser kun breddemæssigt, medmindre vi indstiller flexretningen til søjle.

Ejendom nr. 3: Flex Shrink

Flex-krympning er det modsatte af flex-grow, der bestemmer, hvor meget en firkant får lov til at krympe.

Det kommer kun i spil, hvis elementerne skal krympe for at passe ind i deres beholder - dvs. når beholderen bare er for lille.

Dets vigtigste anvendelse er at specificere, hvilke poster du vil krympe, og hvilke varer du ikke har. Som standard har hvert kvadrat en flex-krympning på 1 - hvilket betyder, at den vil krympe, når kassen sammentrækkes.

Lad os se det i aktion. I nedenstående GIFS har firkanterne en flex-vokse på 1, så de fylder beholderen og en flex-krympe på 1, så de har tilladelse til at krympe som den gør.

Lad os nu indstille flex-krympet af firkant nr. 3 til 0. Det er forbudt at krympe, så det mens det vokser til at passe til beholderen, nægter det at dyppe under sit sæt 120px bredde.

Standardværdien for flex-shrink er 1 - det betyder, at dine elementer vil skrumpe indtil du beder dem om ikke at!

Igen handler flex-krympning om proportioner. Hvis en kasse har flex-krympning på 6, og resten har flex-krympning på 2, vil den ene kasse krympe 3 gange så hurtigt som resten, når pladsen komprimerer.

Bemærk ordlyden der: firkanten med en 3x flex-krympe krymper 3x så hurtigt. Dette betyder ikke, at det vil krympe 1/3 af bredden.

På et øjeblik vil vi dykke dybere ned i, hvor meget ting krymper og vokser. Men først skal vi komme til vores sidste ejendom og samle alt sammen.

Ejendom nr. 4: Flex

Flex er kortfattet til at vokse, skrumpe og basere - alt sammen.

Standardindstillingen er 0 (vokse) 1 (krympe) og auto (basis).

For vores sidste eksempel, lad os forenkle ned til to bokse.

Her er deres egenskaber:

.square # one {
  flex: 2 1 300 px;
}
.quare # to {
  flex: 1 2 300 px;
}

Begge har samme flex-basis. Det betyder, at hvis der er plads nok til begge (beholderen er 600 px plus plads til margener og polstring), vil de begge være 300 px brede.

Men når kassen vokser, vil kvadrat 1 (med den højere flex-vokse) vokse dobbelt så hurtigt. Efterhånden som kassen sammentrækkes, vil Square 2 (med den højere flex-krympning) krympe dobbelt så hurtigt.

Alle sammen nu:

Sådan krymper og vokser ting

Her er hvad der kan være forvirrende: Når firkant 1 vokser vokser den ikke til at være dobbelt så stor som firkant 2. Ligeledes når firkant 2 krymper, skrumper den ikke ned til at være halvdelen af ​​størrelsen på firkant 1 - selvom forholdet flex-krympning er 2 til 1.

Det er ikke deres størrelse, der er 2 til 1 eller 1 til 2. Det er deres hastighed for at krympe og vokse.

En lille matematik

Startstørrelsen for containeren er 640px. Efter at have gjort rede for 20px polstring på hver side af containeren, giver dette plads nok til, at begge firkanter vender tilbage til deres flex-basis på 300px

Når containeren er indstillet til 430 px, har vi mistet 210 px plads. Firkant 1, med flex-krympning på 1, mister 70 px. Kvadrat 2, med flex-krympet på 2, mister 140 px.

Når containeren krymper til 340 px, har vi nu mistet 300 px plads. Firkant 1 mister 100 px, firkant 2 taber 200 px.

Det tabte rum divideres op i forhold til forholdet mellem deres respektive flex-krymper (2 til 1).

Det er den samme historie med flex-grow. Når containeren vokser til 940 px, og vi har opnået 300 px plads, får Square 1 ekstra 200 px, og Square 2 får en ekstra 100 px.

Når det kommer til flexegenskaber, er proportioner navnet på spillet.

I ovenstående GIF kan du se, hvordan bredden justeres i forhold til forholdene, med deltaet (∆), der viser forskellen fra flex-basis.

Konklusion

Som en sidste sammenfatning: flex-basis styrer, hvor stort et element vil være langs hovedaksen, inden der vokser eller krympes. Flex-Grow bestemmer, hvor meget det vil vokse i forhold til søskendeelementer, og flex-shrink bestemmer, hvor meget det vil skrumpe.

Vi har et par flere Flexbox-egenskaber til at dække - hold øje med det i de kommende uger.

Tak så meget for at have læst! Responsen på disse artikler har været overvældende. Jeg værdsætter virkelig, at alle tager sig tid til at læse, svare, anbefale og dele!

Hvis der er et bestemt koncept (Flexbox eller andet), som du gerne vil have forklaret i en lignende artikel, skal du lade et svar eller tweet mig. Du kan også følge mig på Twitter og Medium (ved at trykke på følgeknappen nedenfor).