Learn HTML and CSS: A layout with flexbox

A menu bar and cards in a row

Nadia sends a design by her nephew, who's a graphic designer: the logo and the name on the left, the menu on the right, and the programme cards side by side. "Can you build that?" With what you know now, you can.

A margin that swallows everything

In a flex container, a margin with the value auto takes all the free room on its side. With margin-left: auto on the menu, the menu moves all the way to the right, while the logo and the name stay on the left.

That's how you make the classic menu bar: display: flex and align-items: center on the header, gap for some room, and margin-left: auto on the nav.

With flex-wrap: wrap the menu may go to a second line on a phone; there too the margin pushes it to the right.

style.css

1header {2  display: flex;3  flex-wrap: wrap;4  align-items: center;5  gap: 8px 12px;6}7nav {8  margin-left: auto;9}

foodtruck.example

Try it yourself

Build the menu bar of the design: the logo and the name on the left, in the middle of the height, 12px of room, and the menu on the right. On a phone the menu may go to a second line.

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 striped awning and two wheels: only for the look. */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.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {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.soup {101  background-color: #588157;102}103.card {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.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Ready for more?

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

Start the lesson

A margin that swallows everything

That's how you make the classic menu bar: display: flex and align-items: center on the header, gap for some room, and margin-left: auto on the nav.

With flex-wrap: wrap the menu may go to a second line on a phone; there too the margin pushes it to the right.

style.css

1header {2  display: flex;3  flex-wrap: wrap;4  align-items: center;5  gap: 8px 12px;6}7nav {8  margin-left: auto;9}

foodtruck.example

Try it yourself

Build the menu bar of the design: the logo and the name on the left, in the middle of the height, 12px of room, and the menu on the right. On a phone the menu may go to a second line.

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 striped awning and two wheels: only for the look. */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.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {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.soup {101  background-color: #588157;102}103.card {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.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example