CSS Academy · Les

Flex-grow, shrink en basis

Bepaal met de shorthand flex hoe flex-items groeien, krimpen en hun basisgrootte instellen.

Les 4 van 413 stappen

Flex-grow, shrink en basis is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.

De verkorte notatie flex

De verkorte notatie flex op flexitems stelt drie waarden in: flex-grow, flex-shrink en 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 stelt de beginafmeting van een flexitem in voordat het groter of kleiner wordt. De eigenschap overschrijft width (in de richting row). auto gebruikt de breedte of inhoudsafmeting van het flexitem.

<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 bepaalt hoeveel een flexitem groeit ten opzichte van aangrenzende flexitems wanneer er vrije ruimte beschikbaar is. Een waarde van 0 betekent dat het flexitem niet groeit. Hogere waarden krijgen verhoudingsgewijs meer ruimte.

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

Voorbeeld van flex-grow

Als een container 300px vrije ruimte heeft en twee flexitems met flex-grow 1 en 2, krijgt het eerste flexitem 100px extra en het tweede 200px extra (verhouding 1:2).

flex-shrink

flex-shrink bepaalt hoeveel een flexitem krimpt wanneer er niet genoeg ruimte is. De standaardwaarde is 1 (alle flexitems krimpen evenveel). Met 0 voorkom je krimpen.

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

Veelgebruikte verkorte flex-notaties

Onthoud deze veelgebruikte patronen:

flex: 1 = groeit en krimpt gelijkmatig, basis 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (vast)
flex: 0 0 200px = vaste 200px, groeit en krimpt niet

flex: 1 — Gelijke verdeling

Als je op alle kinderen flex: 1 instelt, wordt de beschikbare ruimte gelijk verdeeld. De basis wordt 0%, zodat flexitems vanaf nul groeien en de ruimte evenredig verdelen.

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

flex-basis heeft voorrang op width in de richting van de hoofdas. Als je beide instelt, wint flex-basis (tenzij flex-basis auto is; dan wordt width gebruikt).

Intrinsieke versus extrinsieke afmetingen

Wanneer flex-basis: 0 (zoals bij flex: 1) is ingesteld, begint het flexitem bij 0 en groeit het evenredig — een echte evenredige verdeling. Met flex-basis: auto beginnen flexitems bij hun natuurlijke inhoudsafmeting en groeien ze daarna.

Het drieluikpatroon

Een klassieke indeling met een vaste zijbalk, flexibele hoofdinhoud en een vaste zijbalk:

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

min-width en max-width met flex

Gebruik min-width en max-width naast flex-grow om grenzen aan de groei in te stellen:

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

Korte controle

Een flexitem heeft flex: 0 0 200px. Wat betekent dit?

Beantwoord dit in de interactieve les

Samenvatting

flex-grow verdeelt extra ruimte evenredig. flex-shrink bepaalt hoe flexitems worden samengedrukt. flex-basis stelt de beginafmeting in. De verkorte notatie flex: 1 maakt een gelijke verdeling van de ruimte mogelijk. Gebruik flex: 0 0 Xpx voor flexitems met een vaste afmeting en flex: 1 voor flexibele flexitems in dezelfde container.

Gratis beginnen

Leer CSS met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Flex-grow, shrink en basis” gratis?

Ja — de volledige tekst van “Flex-grow, shrink en basis” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Flex-grow, shrink en basis”?

Bepaal met de shorthand flex hoe flex-items groeien, krimpen en hun basisgrootte instellen. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met CSS Academy te beginnen?

Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Flex-grow, shrink en basis”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over CSS Academy?

Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar CSS Academy