HTML en CSS leren: Meerdere rijen

Flex-wrap en gap

Op het smalle pleintje achter de kerk passen niet alle trucks naast elkaar. Ze wringen zich in één rij en staan bumper tegen bumper. Nadia wil een tweede rij, en wat ruimte om tussen te lopen.

Doorlopen naar een volgende rij

Standaard blijven flex-items op één rij, ook als ze niet passen: dan krimpen ze. Met flex-wrap: wrap op de container lopen ze door naar een volgende rij, zoals woorden in een zin.

Met gap zet je ruimte tussen de items, nooit aan de randen. Eén waarde geldt tussen de rijen en tussen de kolommen; met row-gap en column-gap kies je ze apart.

Marges om hetzelfde te doen, laten aan de randen ook ruimte over. gap niet.

style.css

1.plein {2  display: flex;3  flex-wrap: wrap;4  gap: 8px;5}

foodtruck.example

Probeer het zelf

Zet de links van het menu naast elkaar met flexbox, 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

Doorlopen naar een volgende rij

Standaard blijven flex-items op één rij, ook als ze niet passen: dan krimpen ze. Met flex-wrap: wrap op de container lopen ze door naar een volgende rij, zoals woorden in een zin.

Met gap zet je ruimte tussen de items, nooit aan de randen. Eén waarde geldt tussen de rijen en tussen de kolommen; met row-gap en column-gap kies je ze apart.

Marges om hetzelfde te doen, laten aan de randen ook ruimte over. gap niet.

style.css

1.plein {2  display: flex;3  flex-wrap: wrap;4  gap: 8px;5}

foodtruck.example

Probeer het zelf

Zet de links van het menu naast elkaar met flexbox, 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