Learn HTML and CSS: Flexbox

Display flex

Nadia looks at the website. "On the street the trucks stand side by side. Here they're stuck in a queue." One line of CSS puts them side by side, if you know which element it goes on.

A flex container

With display: flex you turn an element into a flex container. Its children become flex items and stand side by side, along the main axis: from left to right by default. Only the direct children: what's inside a truck stays ordinary content.

Because the container decides where the items go, you write most flexbox rules on the parent, not on the items.

Under the page you can see the axes: the solid arrow is the main axis, the dashed one the cross axis. Lesson 3 is about that second one.

style.css

1.square {2  display: flex;3}

foodtruck.example

Try it yourself

Put the three cards of the programme side by side.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Wheels &amp; Meals</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>Wheels &amp; Meals</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="map.html">Map</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Food truck festival on Fore Street in Tiverton, 14 and 15 June.</p>21    <section class="square">22      <div class="truck chips">Chips</div>23      <div class="truck taco">Tacos</div>24      <div class="truck ice-cream">Ices</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="cards">28      <article class="card">29        <h2>Saturday</h2>30        <p>From 11 am to 11 pm, with live music from 8 pm.</p>31      </article>32      <article class="card">33        <h2>Sunday</h2>34        <p>From 11 am to 8 pm, with a kids’ corner.</p>35      </article>36      <article class="card">37        <h2>Entry</h2>38        <p>Free. You pay per bite.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Fore Street, Tiverton EX16 6LT</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.square {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.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A real truck: the cab, awning and wheels are only for the look.44   The truck fits inside the box, so its nose never hides under the45   next truck, and it stretches with the box. */46.truck {47  position: relative;48  isolation: isolate;49  margin-bottom: 6px;50  padding: 16px 14px 12px;51  color: #ffffff;52  font-weight: 700;53}54.truck::before {55  content: "";56  position: absolute;57  z-index: -1;58  inset: -3px 0 -1px 0;59  border-style: solid;60  border-width: 32px 20px 12px 12px;61  border-image: url(truck-taco.png) 128 80 48 48 fill round stretch;62  filter: drop-shadow(0 3px 3px rgb(43 33 24 / 0.25));63}64.truck::after {65  content: "";66  position: absolute;67  z-index: -1;68  left: 12px;69  right: 4px;70  bottom: -3px;71  height: 12px;72  background: url(wiel.png) left / 12px no-repeat, url(wiel.png) right / 12px no-repeat;73}74.chips {75  color: #3a2a00;76}77.chips::before {78  border-image-source: url(truck-friet.png);79}80.taco::before {81  border-image-source: url(truck-taco.png);82}83.pizza::before {84  border-image-source: url(truck-pizza.png);85}86.waffle::before {87  border-image-source: url(truck-wafel.png);88}89.ice-cream {90  padding-top: 30px;91  padding-bottom: 26px;92  color: #4a1030;93}94.ice-cream::before {95  border-image-source: url(truck-ijs.png);96}97.curry {98  color: #3a1f00;99}100.curry::before {101  border-image-source: url(truck-curry.png);102}103.burger::before {104  border-image-source: url(truck-burger.png);105}106.soup::before {107  border-image-source: url(truck-soep.png);108}109.card {110  padding: 4px 16px;111  border-radius: 12px;112  background: #ffffff;113  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);114}115.card h2 {116  font-size: 1.15rem;117}118footer {119  padding: 12px 16px;120  background: #264653;121  color: #ffffff;122}

foodtruck.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A flex container

Because the container decides where the items go, you write most flexbox rules on the parent, not on the items.

Under the page you can see the axes: the solid arrow is the main axis, the dashed one the cross axis. Lesson 3 is about that second one.

style.css

1.square {2  display: flex;3}

foodtruck.example

Try it yourself

Put the three cards of the programme side by side.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Wheels &amp; Meals</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>Wheels &amp; Meals</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="map.html">Map</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Food truck festival on Fore Street in Tiverton, 14 and 15 June.</p>21    <section class="square">22      <div class="truck chips">Chips</div>23      <div class="truck taco">Tacos</div>24      <div class="truck ice-cream">Ices</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="cards">28      <article class="card">29        <h2>Saturday</h2>30        <p>From 11 am to 11 pm, with live music from 8 pm.</p>31      </article>32      <article class="card">33        <h2>Sunday</h2>34        <p>From 11 am to 8 pm, with a kids’ corner.</p>35      </article>36      <article class="card">37        <h2>Entry</h2>38        <p>Free. You pay per bite.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Fore Street, Tiverton EX16 6LT</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.square {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.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A real truck: the cab, awning and wheels are only for the look.44   The truck fits inside the box, so its nose never hides under the45   next truck, and it stretches with the box. */46.truck {47  position: relative;48  isolation: isolate;49  margin-bottom: 6px;50  padding: 16px 14px 12px;51  color: #ffffff;52  font-weight: 700;53}54.truck::before {55  content: "";56  position: absolute;57  z-index: -1;58  inset: -3px 0 -1px 0;59  border-style: solid;60  border-width: 32px 20px 12px 12px;61  border-image: url(truck-taco.png) 128 80 48 48 fill round stretch;62  filter: drop-shadow(0 3px 3px rgb(43 33 24 / 0.25));63}64.truck::after {65  content: "";66  position: absolute;67  z-index: -1;68  left: 12px;69  right: 4px;70  bottom: -3px;71  height: 12px;72  background: url(wiel.png) left / 12px no-repeat, url(wiel.png) right / 12px no-repeat;73}74.chips {75  color: #3a2a00;76}77.chips::before {78  border-image-source: url(truck-friet.png);79}80.taco::before {81  border-image-source: url(truck-taco.png);82}83.pizza::before {84  border-image-source: url(truck-pizza.png);85}86.waffle::before {87  border-image-source: url(truck-wafel.png);88}89.ice-cream {90  padding-top: 30px;91  padding-bottom: 26px;92  color: #4a1030;93}94.ice-cream::before {95  border-image-source: url(truck-ijs.png);96}97.curry {98  color: #3a1f00;99}100.curry::before {101  border-image-source: url(truck-curry.png);102}103.burger::before {104  border-image-source: url(truck-burger.png);105}106.soup::before {107  border-image-source: url(truck-soep.png);108}109.card {110  padding: 4px 16px;111  border-radius: 12px;112  background: #ffffff;113  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);114}115.card h2 {116  font-size: 1.15rem;117}118footer {119  padding: 12px 16px;120  background: #264653;121  color: #ffffff;122}

foodtruck.example