Forskellen mellem bredde og flex-basis i Flexbox

Forstå de underlige dele

Da jeg først begyndte at lære Flexbox, var det, der ramte mig mest nysgerrig, "Hvorfor tilføjede de denne flex-basis?" Jeg mener, jeg har bredde ... Hvorfor er der også en flex-basis?

“Dynamisk begrænsning”

Jeg læste flere artikler om emnet. Alle krævede en vis forskel mellem bredde og flex-basis. Ingen af ​​dem forklarede dog fuldt ud, hvad forskellen skulle være.

Efter en masse eksperimenter og noget godt ulovligt mode-fiddling kom jeg til den konklusion, at det primære formål med flex-basis var at give en “dynamisk” begrænsning. Hvad mener jeg dog præcist med det? En "dynamisk" begrænsning.

Jeg antager, at du allerede er bekendt eller i det mindste generelt bekendt med CSS og Flexbox.

Jeg vil ikke gå dybt ind i detaljer om CSS eller Flexbox, der vil lære dig kernekoncepterne for nogen af ​​dem.

Brug for at vide det

Jeg vil også bruge SCSS, ikke native CSS, og "Block-Element-Modifier (BEM)" -metoden. Årsagen til dette er, at jeg mener, at det er lettere at være kortfattet på denne måde. Så du bliver nødt til at forstå det grundlæggende i SCSS og indlejring, BEM skal være selvbeskrivende i eksemplerne.

Målet med denne artikel er at forenkle den gåde, der synes at eksistere på internettet med hensyn til flex-basis. Jeg har ofte set svaret "du bruger flex-basis i stedet for bredde" som et svar på dets formål. Dette er selvfølgelig helt acceptabelt i de fleste tilfælde, selvom det er muligt at bruge det på mere avancerede måder. Det ser ud til, at potentialet i flex-basis har undgået mange i nogen tid nu (selvfølgelig ikke alle), men jeg tør sige mange .

Jeg vil prøve at overbevise dig om i denne artikel, at Flexbox's flex-basis ikke er en erstatning for bredde (eller højde) . Det er et helt nyt værktøj helt med sit eget sæt muligheder.

Kød og kartofler

Så nu har jeg sagt disse ting ... Den næste del er at forklare og vise nøjagtigt, hvad jeg taler om her. Som du måske ved, kan du bruge flex-basis i stedet for bredde, når du arbejder med flex-box.

Visuelle eksempler

I ovenstående eksempel har vi et "indre" element, der vil leve inde i det ydre "element". Det ydre element er vores Flexbox, og det indre har en flex-basis på 400px.

HTML til ovenstående kan se sådan ud:

Resultatet er en grå kasse, der er nøjagtigt 400 px bred og 250 px høj i midten af ​​vores skærm som sådan:

I ovenstående eksempel er vores wrapper .element automatisk standard til en flexretning , der er række (venstre mod højre) og ikke kolonne (top til bund). Huske på, at. Snart vil vi ændre det til kolonne, og du får se, hvad hele denne artikel handler om. Den dynamiske karakter af Flexbox's flex-basis.

Lad os blive "dynamiske"

Så lad os ændre koden for at vise den “dynamiske natur”. For at gøre dette er alt, hvad vi skal gøre, at ændre det ydre element til at have en ( flex-retning: kolonne ) og ændre højden til bredden på det indre element (html ændres ikke).

Ændring af flex-retning ændrer den retning, som flex-basis vil påvirke. Så effektivt er flex-basis både bredde og højde. I eksemplet ovenfor vil flex-basis nu resultere i, at blokken er 400px høj versus det 400px brede rektangel, vi så før.

Hvis du selv vil lege med denne kode, er her en kodepen med ovenstående kode i.

Observation

Bemærk hvordan i det første eksempel overtager flex-basis rollen som bredde og i det andet eksempel rollen som højde. Flex-basis er både bredde og højde i en Flexbox afhængigt af flexretningen. Temmelig sejt!

Dybere forståelse / bedste praksis

Her er nogle af de vigtigste ting, jeg har lært om flex-basis under min brug af Flexbox's flex-basis.

  • Flex-basis styrer enten “bredde” eller “højde” baseret på flexretningen
  • Flex-basis tilsidesætter enhver anden bredde: eller højde: egenskaber hvis specifikt deklareret andet end flex-basis: auto (auto som standard)
  • Forkortelsen for flex-basis er (flex: $ grow, $ shrink, $ size) og er som standard indstillet til (flex: 0 1 auto ).
  • Når flexbasis er indstillet til auto , kontrollerer den først for en bredde- eller højdeegenskab (baseret på retning), hvis ingen , bruger elementernes indholdsstørrelse
  • Flex-basis overholder stadig min / max-bredde: eller højdeindstillinger. Igen er det baseret på flexretningen:
  • Flex-basis i en kolonne tilsidesætter højde: dette er vigtigt, for selv om bredde: vil adlyde flex-krympning, højde: ikke. (Dette kan medføre forvirrende og uventede resultater i dit design.)

Vigtigt at bemærke

Bemærk, hvordan auto er fed. Som standard, hvis du har et breddeindstillet og ikke deklarerer en flex-basisværdi, fungerer bredden normalt på dette element. Der er ingen forskel mellem, hvordan flex-basis: fungerer på dit element, og hvordan bredde: fungerer på dit element. Bredden overholder endda flex-krympning, når du bruger Flexbox.

Den divergerende faktor mellem bredde og flex-basis er flex-basis's dynamiske evne til at ændre sin effektive retning baseret på flex-retning.

Advarslen

højde: på den anden side fungerer lidt anderledes. Højdeegenskaben adlyder ikke flex-krympning på samme måde som bredden gør. Når du bruger flex-retning- søjle, skal du altid bruge flex-basis til dynamisk at styre din Flexbox's størrelse, så du får ensartede og forventede resultater.

Vær også særlig opmærksom på punkt 4 :

  • Når flexbasis er indstillet til auto , kontrollerer den først for en bredde- eller højdeegenskab (baseret på retning), hvis ingen , bruger elementernes indholdsstørrelse

Dette betyder, at flex-basis automatisk vil størrelsen på elementet baseret på størrelsen på indholdet (størrelsen på det indre element), når det er indstillet til flex-basis: auto. Kun hvis der ikke er en bredde: eller en højde: indstillet på elementet.

Bedste praksis

Jeg anbefaler, at når du som en bedste praksis kan bruge flex-basis over bredde eller højde, er dine resultater på denne måde altid ensartede. I betragtning af at bredden: adlyder flex-krympning og den højde: ikke, skal du forstå, at der kan være dramatiske forskelle mellem, hvordan bredde og højde fungerer i en Flexbox, når du bruger andre Flexbox-egenskaber sammen, som f.eks. Brug også stenografien af ​​flex af hensyn til bekvemmelighed, konsistens og læsbarhed.

Forkortelsen for flex-basis er (flex: $ grow, $ shrink, $ størrelse) og er som standard indstillet til (flex: 0 1 auto ).

flex: 0 1 200px;

Der er nogle tilfælde, hvor du muligvis skal bruge bredde eller højde over flex-basis. Nogle tilfælde kan omfatte Flexbox bug-løsninger. En god ressource om dette emne er Flexbugs. Flexbugs er også et godt sted at bestemme andre bedste fremgangsmåder baseret på de browsere, du agter at støtte.

Yderligere ressourcer

I det følgende codepen- eksempel viser jeg flex-wrap for at demonstrere et visuelt eksempel på ovenstående information fra denne artikel.

Brug dette kodepen og gennemgå koden grundigt. Du vil se, hvordan jeg kun bruger flex-basis en gang i hele kodebasen til at kontrollere flere scenarier. Dette er blot et lille eksempel på mulige brugssager.

Konklusion

At vide, at flex-basis er både en bredde og en højdebegrænsning, er et godt værktøj at have. Den er dynamisk skiftbar. Ved hjælp af flex-basis kan du oprette nogle meget intuitive designelementer. Nogle kan endda skifte under en Flexbox's flexretningsændring ved et afgørende brudpunkt i dit design og forhåbentlig giver dig en renere løsning. Denne viden skal også hjælpe dig med at designe bedre og mere trygt med Flexbox, da denne funktionalitet er nøglen til at bruge Flexbox til sit fulde potentiale.

Hvis du tror, ​​der er noget, jeg savnede, fandt en tastefejl osv ... så lad mig det vide!

Jeg håber, at denne korte og søde artikel blev fundet nyttig for nogen. Hvis du værdsætter den investerede indsats, bedes du give artiklen et klapp! ?

Kontakt os?

Hvis du gerne vil tale med en butik, er det bedste sted at linke med mig på linkedin eller ved at kontakte mig via min hjemmeside.

Jeg vil gøre mit bedste for at svare på eventuelle kommentarer eller spørgsmål her på Medium.

Hvis du gør det sociale: Instagram eller Facebook.

Fotokreditter : (Vandfald | Jared Erondu) (Chatter | Dan Wayman) (Ansvarsfraskrivelse | Pop & Zebra) (Målsætning | Olav Ahrens Røtne) og (Lad os gå | Goh Rhy Yan). Alle billeder fra Unsplash.com