HTML en CSS leren: De richting van de hoofdas

Flex-direction

Langs de Nieuwstraat is geen plein maar een lange strook: daar staan de trucks onder elkaar. En aan de ingang wil Nadia ze in omgekeerde volgorde. Draai de hoofdas.

De assen draaien mee

Met flex-direction kies je de richting van de hoofdas: row (standaard, van links naar rechts), row-reverse (van rechts naar links), column (van boven naar onder) en column-reverse (van onder naar boven).

De dwarsas draait mee. In een column werkt justify-content dus van boven naar onder, en align-items van links naar rechts.

style.css

1.plein {2  display: flex;3  flex-direction: column;4  align-items: center;5}

foodtruck.example

Probeer het zelf

Op een gsm wil Nadia de links van het menu onder elkaar. Gebruik flexbox om ze in een kolom te zetten.

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

De assen draaien mee

De dwarsas draait mee. In een column werkt justify-content dus van boven naar onder, en align-items van links naar rechts.

style.css

1.plein {2  display: flex;3  flex-direction: column;4  align-items: center;5}

foodtruck.example

Probeer het zelf

Op een gsm wil Nadia de links van het menu onder elkaar. Gebruik flexbox om ze in een kolom te zetten.

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