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

Sidste gang vi kom i gang med de grundlæggende Flexbox-egenskaber: flex-direction, justify-content, align-items og align-self.

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

Lad os nu se nærmere på Flexbox-størrelsen - og hvordan du kan udnytte den til at opbygge tilpasningsdygtige og smukke layout.

Ejendom nr. 1: Flex-Basis

I den sidste artikel kiggede vi mest på egenskaber, der gælder for containerelementer. Denne gang vil vi udelukkende undersøge størrelsen på børneelementer.

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

Men - rolig. Det er faktisk ret ligetil.

Flex-basis styrer standardelementet for et element, inden det manipuleres af andre Flexbox-egenskaber (mere om det senere).

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

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

Flex-basis påvirker elementets størrelse på tværs af hovedaksen.

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

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

Ejendom nr. 2: Flex Grow

Nu bliver vi lidt mere komplekse.

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

Nu, når det kommer til ejendommen kaldet flex-grow , er standard 0 . Det betyder, at firkanterne ikke får lov til at vokse for at tage plads i containeren.

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

Firkanterne tager samlet hele containerens bredde med pladsen jævnt fordelt mellem dem. Flex-grow-værdien tilsidesætter bredden.

Den forvirrende del om flex-grow er dog, hvad værdien faktisk betyder. Hvad betyder flex-grow: 1 faktisk?

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

Det er ... nøjagtigt det samme.

Det er fordi flex-grow ikke er en absolut værdi - det er en relativ værdi.

Det, der betyder noget, er ikke, hvad en firkants flex-grow-værdi alene er, men hvad den er i forhold til de andre firkanter.

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

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

Hver firkant starter med en flexvækst på 1. Hvis vi sammenlægger flexvæksten for hver firkant, er vores samlede seks. Beholderen er således opdelt i 6 separate sektioner. Hver firkant vokser til at fylde 1/6 af den ledige plads i containeren.

Når vi indstiller flex-grow af Square # 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.

Firkant nr. 3 får derefter 2/7 af dette rum, 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.

Flex-grow handler om proportioner . Hvis vi indstiller hver firkant til flex-grow: 4, og square # 3 til flex-grow: 12, får vi det samme resultat, som hvis 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 gælder flex-grow på tværs af hovedaksen. Vores firkanter vokser kun bredde, medmindre vi sætter flexretningen til kolonne.

Ejendom # 3: Flex Shrink

Flex-krympning er det modsatte af flex-grow, der bestemmer, hvor meget en firkant må krympe.

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

Dens vigtigste anvendelse er at specificere, hvilke emner du vil krympe, og hvilke emner du ikke gør. Som standard har hver firkant en flex-krympning på 1 - hvilket betyder, at den krymper, når kassen trækker sig sammen.

Lad os se det i aktion. I nedenstående GIFS har firkanterne en flex-vækst på 1, så de fylder beholderen og en flex-krympning på 1, så de får lov til at krympe som det gør.

Lad os nu sætte flex-krympning af firkant nr. 3 til 0. Det er forbudt at krympe, så mens det vokser til at passe til beholderen, nægter det at dyppe under dets indstillede bredde på 120 pixels.

Standardværdien for flex-shrink er 1 - det betyder, at dine elementer krymper, indtil du beder dem om ikke at gøre det!

Igen handler flex-shrink om proportioner. Hvis en kasse har flexkrympning på 6, og resten har flexkrympning på 2, krymper den ene kasse 3x så hurtigt som resten, når rummet komprimeres.

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

Om et øjeblik dykker vi dybere ned i, hvor meget ting krymper og vokser. Men lad os først komme til vores sidste ejendom og bringe alt sammen.

Ejendom # 4: Flex

Flex er stenografi til at vokse, krympe og basere - alt sammen.

Den er som standard 0 (vokser) 1 (krymper) og auto (basis).

Lad os i vores sidste eksempel forenkle ned til to felter.

Her er deres egenskaber:

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

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

Men når kassen vokser, vokser Square 1 (med den højere flex-grow) dobbelt så hurtigt. Når kassen trækker sig sammen, krymper firkant 2 (med den højere flexkrympning) dobbelt så hurtigt.

Alle sammen nu:

Hvordan ting krymper og vokser

Her er hvad der kan være forvirrende: når firkant 1 vokser, bliver det ikke dobbelt så stort som firkant 2. Ligeledes, når firkant 2 krymper, krymper det ikke til at være halvt så stort som kvadrat 1 - selvom forholdet af 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 640 px. Efter at have tegnet 20px polstring på hver side af containeren, giver dette plads nok til, at begge firkanter kan vende tilbage til deres flex-basis på 300px

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

Når beholderen krymper til 340px, har vi nu mistet 300px plads. Kvadrat 1 mister 100px , Square 2 mister 200px .

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

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

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, hvor deltaet (∆) viser forskellen fra flex-basis.

Konklusion

Som et sidste resumé: flex-basis styrer, hvor stort et element vil være langs hovedaksen, inden der vokser eller krymper. Flex-grow bestemmer, hvor meget det vil vokse i forhold til søskendeelementer, og flex-shrink bestemmer, hvor meget det vil krympe.

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

Mange tak for læsningen! Svaret på disse artikler har været overvældende. Jeg sætter stor pris på, 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 se forklaret i en lignende artikel, skal du efterlade et svar eller tweet mig. Du kan også følge mig på Twitter og Medium (ved at trykke på følgeknappen nedenfor).