CSS Academy · Lektion

Flex-grow, shrink og basis

Styr, hvordan flex-elementer vokser og krymper, og angiv deres grundstørrelse med flex-shorthand.

Lektion 4 af 413 trin

Flex-grow, shrink og basis er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Kortformen flex

Kortformen flex på flex-elementer angiver tre værdier: 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 angiver et flex-elements oprindelige størrelse, før det vokser eller bliver mindre. Den tilsidesætter width (i row-retningen). auto bruger elementets width eller indholdsstø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 meget et element vokser i forhold til søskendeelementerne, når der er ledig plads. En værdi på 0 betyder, at det ikke vokser. Højere værdier får forholdsmæssigt mere plads.

<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 plads og to elementer med flex-grow på henholdsvis 1 og 2, får det første 100px ekstra, og det andet får 200px ekstra (forholdet 1:2).

flex-shrink

flex-shrink styrer, hvor meget et element bliver mindre, når der ikke er plads nok. Standardværdien er 1 (alle elementer bliver lige meget mindre). 0 forhindrer, at elementet bliver mindre.

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

Almindelige værdier for kortformen flex

Husk disse almindelige mønstre:

flex: 1 = vokser og bliver lige meget mindre, basis 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (fast)
flex: 0 0 200px = fast 200px, vokser eller bliver ikke mindre

flex: 1 — ligelig fordeling

Hvis du angiver flex: 1 på alle underordnede elementer, fordeles den tilgængelige plads ligeligt. Basen bliver 0%, så elementerne vokser fra nul og fordeler pladsen proportionalt.

<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 sammenlignet med width

flex-basis har forrang frem for width i hovedaksens retning. Hvis du angiver begge, vinder flex-basis (medmindre flex-basis er auto, som derefter bruger width).

Indholdsbestemt sammenlignet med ydre størrelsesberegning

Når flex-basis: 0 (som i flex: 1), starter elementet ved 0 og vokser proportionalt — en ægte proportional fordeling. Med flex-basis: auto starter elementerne med deres naturlige indholdsstørrelse og vokser derefter.

Det klassiske trekløver-mønster

Et klassisk layout med et fast sidepanel, et fleksibelt hovedområde og et fast sidepanel:

<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

Brug min-width og max-width sammen med flex-grow for at styre grænserne for, hvor meget elementerne kan vokse:

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

Hurtigt tjek

Et element har flex: 0 0 200px. Hvad betyder det?

Besvar den i den interaktive lektion

Opsamling

flex-grow fordeler ekstra plads proportionalt. flex-shrink styrer, hvordan elementer komprimeres. flex-basis angiver startstørrelsen. Kortformen flex: 1 muliggør ligelig fordeling af pladsen. Brug flex: 0 0 Xpx til elementer med fast størrelse og flex: 1 til fleksible elementer i samme container.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Flex-grow, shrink og basis” gratis?

Ja — hele teksten til “Flex-grow, shrink og basis” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Flex-grow, shrink og basis”?

Styr, hvordan flex-elementer vokser og krymper, og angiv deres grundstørrelse med flex-shorthand. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Flex-grow, shrink og basis”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy