HTML en CSS leren: Groeien en krimpen

Flex-grow, flex-shrink en flex-basis

De tacotruck heeft een terras met tafels, en dat mag alle vrije plaats innemen. Op de standplaatsen langs de straat wil Nadia dan weer elke truck even breed. De items beslissen nu zelf mee.

Groeien, krimpen en een startmaat

Drie eigenschappen op een item bepalen hoe breed het wordt langs de hoofdas. flex-basis is de startmaat (standaard auto: de breedte van de inhoud). flex-grow zegt hoeveel van de vrije ruimte het item krijgt: standaard 0, dus niets. flex-shrink zegt hoeveel het krimpt als er te weinig plaats is: standaard 1.

Een item met flex-grow: 1 neemt alle vrije ruimte; twee items met flex-grow: 1 delen ze eerlijk.

De afkorting flex: 1 betekent flex-grow: 1, flex-shrink: 1 en flex-basis: 0. Omdat elk item dan van nul begint, worden ze allemaal even breed.

style.css

1.plein {2  display: flex;3}4.taco {5  flex-grow: 1;6}

foodtruck.example

Probeer het zelf

Zet de kaarten van het programma naast elkaar, even breed, met 16px ruimte ertussen.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Wielen &amp; Smullen</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="truck.svg" alt="" width="40" height="40">11    <h1>Wielen &amp; Smullen</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="plan.html">Plan</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Foodtruckfestival op de Grote Markt van Tienen, 14 en 15 juni.</p>21    <section class="plein">22      <div class="truck friet">Friet</div>23      <div class="truck taco">Taco's</div>24      <div class="truck ijs">IJs</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="kaarten">28      <article class="kaart">29        <h2>Zaterdag</h2>30        <p>Van 11 tot 23 uur, met livemuziek vanaf 20 uur.</p>31      </article>32      <article class="kaart">33        <h2>Zondag</h2>34        <p>Van 11 tot 20 uur, met een kinderhoek.</p>35      </article>36      <article class="kaart">37        <h2>Toegang</h2>38        <p>Gratis. Je betaalt per hapje.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Grote Markt, 3300 Tienen</p>44  </footer>45</body>46</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.plein {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.plein.hoog {38  height: 200px;39}40.plein.smal {41  max-width: 250px;42}43/* Een luifel met strepen en twee wielen: alleen voor de sier. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.friet {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.wafel {85  background-color: #9c6644;86}87.ijs {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soep {101  background-color: #588157;102}103.kaart {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.kaart h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Groeien, krimpen en een startmaat

Een item met flex-grow: 1 neemt alle vrije ruimte; twee items met flex-grow: 1 delen ze eerlijk.

De afkorting flex: 1 betekent flex-grow: 1, flex-shrink: 1 en flex-basis: 0. Omdat elk item dan van nul begint, worden ze allemaal even breed.

style.css

1.plein {2  display: flex;3}4.taco {5  flex-grow: 1;6}

foodtruck.example

Probeer het zelf

Zet de kaarten van het programma naast elkaar, even breed, met 16px ruimte ertussen.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Wielen &amp; Smullen</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="truck.svg" alt="" width="40" height="40">11    <h1>Wielen &amp; Smullen</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="plan.html">Plan</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Foodtruckfestival op de Grote Markt van Tienen, 14 en 15 juni.</p>21    <section class="plein">22      <div class="truck friet">Friet</div>23      <div class="truck taco">Taco's</div>24      <div class="truck ijs">IJs</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="kaarten">28      <article class="kaart">29        <h2>Zaterdag</h2>30        <p>Van 11 tot 23 uur, met livemuziek vanaf 20 uur.</p>31      </article>32      <article class="kaart">33        <h2>Zondag</h2>34        <p>Van 11 tot 20 uur, met een kinderhoek.</p>35      </article>36      <article class="kaart">37        <h2>Toegang</h2>38        <p>Gratis. Je betaalt per hapje.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Grote Markt, 3300 Tienen</p>44  </footer>45</body>46</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.plein {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.plein.hoog {38  height: 200px;39}40.plein.smal {41  max-width: 250px;42}43/* Een luifel met strepen en twee wielen: alleen voor de sier. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.friet {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.wafel {85  background-color: #9c6644;86}87.ijs {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soep {101  background-color: #588157;102}103.kaart {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.kaart h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example