HTML en CSS leren: Flexbox

Display flex

Nadia kijkt naar de website. "Op het plein staan de trucks naast elkaar. Hier staan ze in de file." Eén regel CSS zet ze naast elkaar, als je weet op welk element.

Een flexcontainer

Met display: flex maak je van een element een flexcontainer. Zijn kinderen worden flex-items en gaan naast elkaar staan, langs de hoofdas: standaard van links naar rechts. Alleen de directe kinderen: wat in een truck zit, blijft gewone inhoud.

Omdat de container beslist waar de items staan, schrijf je de meeste flexbox-regels op de ouder, niet op de items.

Onder de pagina zie je de assen: de doorlopende pijl is de hoofdas, de gestippelde de dwarsas. Over die tweede gaat les 3.

style.css

1.plein {2  display: flex;3}

foodtruck.example

Probeer het zelf

Zet de drie kaarten van het programma naast elkaar.

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

Een flexcontainer

Omdat de container beslist waar de items staan, schrijf je de meeste flexbox-regels op de ouder, niet op de items.

Onder de pagina zie je de assen: de doorlopende pijl is de hoofdas, de gestippelde de dwarsas. Over die tweede gaat les 3.

style.css

1.plein {2  display: flex;3}

foodtruck.example

Probeer het zelf

Zet de drie kaarten van het programma naast elkaar.

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