Du har tre bokser i en flex container, men de tar bare opp en brøkdel av den tilgjengelige plassen. Resten er tom. Eller det motsatte: innholdet er for bredt, og boksene blir presset sammen uten at du styrer hvem som krymper mest. Flex-grow i CSS lar deg bestemme hvordan elementer vokser for å fylle ledig plass, mens flex-shrink kontrollerer hvordan de krymper når plassen ikke strekker til. Sammen med flex-basis gir de deg presis kontroll over størrelsesfordelingen i en flex container.
Flex-grow i CSS: la elementer fylle ledig plass
Standardverdien for flex-grow er 0. Det betyr at et flex item ikke vokser, selv om det finnes masse ledig plass i containeren. Setter du flex-grow til 1 på alle items, deler de ledig plass likt mellom seg. Hvert element utvider seg like mye for å fylle containeren helt.
Verdien er relativ. Har du to elementer der det ene har flex-grow: 3 og det andre flex-grow: 1, totalsummen er fire deler. Det første elementet tar tre fjerdedeler av den ledige plassen, det andre tar en fjerdedel. Bytter du til tusen og tusen, får du 50 prosent på begge. Det er forholdet mellom verdiene som teller, ikke tallet i seg selv.
Flex-shrink: kontroller krymping når plassen er trang
Flex-shrink bestemmer hvor mye et element skal krympe når det totale innholdet er bredere enn containeren. Standardverdien er 1, som betyr at alle items krymper like mye. Setter du verdien til 2, krymper det elementet dobbelt så mye som de andre.
Et element krymper bare når det faktisk presses ut av et annet element. Finnes det nok plass i containeren, skjer ingenting uansett hvilken flex-shrink-verdi du setter. Først når et naboelement krever mer plass enn det som er tilgjengelig, aktiveres krympingen.
Den mest nyttige verdien å kjenne til er flex-shrink: 0. Da sier du at elementet ikke skal krympe i det hele tatt. Selv om et naboelement prøver å ta opp all tilgjengelig plass, beholder elementet med flex-shrink: 0 sin størrelse. Dette er spesielt nyttig for elementer med fast bredde, som ikoner eller logoer, som ikke bør komprimeres.
Flex-basis: utgangspunktet for beregningen
Flex-basis setter startstørrelsen til et element før flex-grow og flex-shrink gjør jobben sin. Det ligner på å sette bredde, men flex-basis respekterer flex-modellen. Standardverdien er auto, som betyr at elementet bruker innholdets størrelse som utgangspunkt.
Setter du flex-basis til 200px, starter elementet med en bredde på 200 piksler. Deretter fordeles ledig plass med flex-grow, eller elementet krympes med flex-shrink om nødvendig. Flex-basis fungerer som ønsket størrelse, ikke garantert størrelse. Nettleseren bruker den som startpunkt for beregningen.
Shorthand: flex-egenskapen samler alt
I stedet for å skrive flex-grow, flex-shrink og flex-basis hver for seg, kan du bruke shorthand-egenskapen flex. Syntaksen er flex: grow shrink basis. Skriver du flex: 1 1 auto, betyr det at elementet kan vokse med faktor 1, krympe med faktor 1, og starter med automatisk størrelse.
Den vanligste verdien du trenger er flex: 1 1 auto. Den sier at alle items skal fylle opp all tilgjengelig plass i containeren, og hvert item tar opp like mye. Legger du til et fjerde element i containeren, omfordeles plassen automatisk uten at du endrer CSS-en. Det er fleksibiliteten i flexbox i praksis.
Hva bør du fokusere på først?
Flex-grow og flex-shrink kan virke abstrakt i begynnelsen. Fokuser på to ting: flex: 1 1 auto for å la elementer dele plassen likt, og flex-shrink: 0 for å beskytte elementer som ikke skal krympes. Når du mestrer disse to mønstrene, dekker du de aller fleste situasjonene du møter i praksis.
Vil du styre plasseringen av elementene i tillegg til størrelsen, er neste steg å forstå justify-content og align-items. Og når elementene ikke får plass på en linje, handler det om flex-wrap. Du kan lese mer om den fulle beregningsmodellen i MDN sin dokumentasjon om flex item-størrelser.
Lær mer om flex-grow og flex-shrink med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Live-demonstrasjon av fill, grow og shrink med ulike verdier og kombinasjoner
- Hvordan flex shorthand-syntaksen fungerer og hva hver del betyr
- Praktiske tips for når du bør bruke flex-shrink: 0 for å beskytte elementstørrelser
