CSS Academy · leksjon

Flex Grow, Shrink og Basis

Styr hvordan flex-elementer vokser og krymper, og angi grunnstørrelsen med flex-kortformen.

Leksjon 4 av 413 trinn

Flex Grow, Shrink og Basis er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Kortformen flex

Kortformen flex på flex-elementer angir tre verdier: flex-grow, flex-shrink og flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis angir startstørrelsen til et flex-element før det vokser eller krymper. Den overstyrer width (i row-retning). auto bruker elementets width eller innholdsstørrelse.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow bestemmer hvor mye et element vokser i forhold til søskenelementene når det finnes ledig plass. En verdi på 0 betyr at elementet ikke vokser. Høyere verdier får proporsjonalt mer plass.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Eksempel på flex-grow

Hvis en container har 300px ledig plass og to elementer med flex-grow på henholdsvis 1 og 2, får det første 100px ekstra, mens det andre får 200px ekstra (forholdet 1:2).

flex-shrink

flex-shrink styrer hvor mye et element krymper når det ikke er nok plass. Standardverdien er 1 (alle elementer krymper likt). 0 hindrer krymping.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Vanlige kortformer for flex

Husk disse vanlige mønstrene:

flex: 1 = vokser og krymper likt, basis 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (fast)
flex: 0 0 200px = fast 200px, vokser eller krymper ikke

flex: 1 — lik fordeling

Hvis du angir flex: 1 for alle underordnede elementer, deles den tilgjengelige plassen likt. Basisverdien blir 0 %, slik at elementene vokser fra ingenting og deler plassen proporsjonalt.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis kontra width

flex-basis har forrang fremfor width i retningen til hovedaksen. Hvis du angir begge, vinner flex-basis (med mindre flex-basis er auto, som da overlater avgjørelsen til width).

Intrinsisk og ekstrinsisk størrelsesberegning

Når flex-basis: 0 er angitt (som i flex: 1), starter elementet på 0 og vokser proporsjonalt – en reell proporsjonal fordeling. Med flex-basis: auto starter elementene med sin naturlige innholdsstørrelse og vokser deretter.

Mønsteret med tre deler

Et klassisk oppsett med en fast sidestolpe, fleksibelt hovedinnhold og en fast sidestolpe:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width og max-width med flex

Bruk min-width og max-width sammen med flex-grow for å styre grensene for vekst:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Hurtigsjekk

Et element har flex: 0 0 200px. Hva betyr dette?

Besvar den i den interaktive leksjonen

Oppsummering

flex-grow fordeler ekstra plass proporsjonalt. flex-shrink styrer hvordan elementene komprimeres. flex-basis angir startstørrelsen. Kortformen flex: 1 muliggjør lik fordeling av plass. Bruk flex: 0 0 Xpx for elementer med fast størrelse og flex: 1 for fleksible elementer i samme container.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Flex Grow, Shrink og Basis» gratis?

Ja – hele teksten i «Flex Grow, Shrink og Basis» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Flex Grow, Shrink og Basis»?

Styr hvordan flex-elementer vokser og krymper, og angi grunnstørrelsen med flex-kortformen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Flex Grow, Shrink og Basis»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til CSS Academy