CSS Academy · Lektion

Flex-grow, shrink och basis

Styr hur flexobjekt växer och krymper och ange deras basstorlek med flex-kortformen.

Lektion 4 av 413 steg

Flex-grow, shrink och basis är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Kortnotationen flex

Kortnotationen flex på flexobjekt anger tre värden: flex-grow, flex-shrink och 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 anger ett flexobjekts ursprungliga storlek innan det växer eller krymper. Den åsidosätter width (i rad-riktning). auto använder objektets bredd eller innehållsstorlek.

<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 avgör hur mycket ett objekt växer i förhållande till syskonobjekten när det finns ledigt utrymme. Värdet 0 innebär att objektet inte växer. Högre värden får proportionellt mer utrymme.

<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>

Exempel på flex-grow

Om en container har 300px ledigt utrymme och två objekt med flex-grow 1 respektive 2 får det första 100px extra och det andra 200px extra (förhållandet 1:2).

flex-shrink

flex-shrink styr hur mycket ett objekt krymper när det inte finns tillräckligt med utrymme. Standardvärdet är 1 (alla objekt krymper lika mycket). 0 förhindrar att objektet krymper.

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

Vanliga värden för flex-kortnotationen

Lär er dessa vanliga mönster utantill:

flex: 1 = växer och krymper lika mycket, med basen 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (oflexibelt)
flex: 0 0 200px = fast storlek på 200px, växer eller krymper inte

flex: 1 — lika fördelning

Om Ni anger flex: 1 för alla barn delas det tillgängliga utrymmet lika. Basen blir 0%, så objekten växer från noll och delar utrymmet proportionellt.

<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 jämfört med width

flex-basis har företräde framför width i huvudaxelns riktning. Om Ni anger båda vinner flex-basis (såvida flex-basis inte är auto, då använder den i stället width).

Intrinsisk jämfört med extrinsisk storleksbestämning

När flex-basis: 0 används (som i flex: 1) börjar objektet från 0 och växer proportionellt — en verkligt proportionell fördelning. Med flex-basis: auto börjar objekten med sin naturliga innehållsstorlek och växer sedan.

Mönstret den heliga treenigheten

En klassisk layout med en fast sidopanel, en flexibel huvudyta och en fast sidopanel:

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

min-width och max-width med flex

Använd min-width och max-width tillsammans med flex-grow för att styra gränserna för hur mycket objekten får växa:

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

Snabb kontroll

Ett objekt har flex: 0 0 200px. Vad innebär det?

Besvara frågan i den interaktiva lektionen

Sammanfattning

flex-grow fördelar extra utrymme proportionellt. flex-shrink styr hur objekten krymper. flex-basis anger startstorleken. Kortnotationen flex: 1 möjliggör lika fördelning av utrymmet. Använd flex: 0 0 Xpx för objekt med fast storlek och flex: 1 för flexibla objekt i samma container.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Flex-grow, shrink och basis” gratis?

Ja – hela texten till ”Flex-grow, shrink och basis” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Flex-grow, shrink och basis”?

Styr hur flexobjekt växer och krymper och ange deras basstorlek med flex-kortformen. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Flex-grow, shrink och basis”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy