Learn HTML and CSS: Growing and shrinking

Flex-grow, flex-shrink and flex-basis

The taco truck has a terrace with tables, and it may take all the free room. Along the street, on the other hand, Nadia wants every truck equally wide. Now the items have a say too.

Growing, shrinking and a starting size

Three properties on an item decide how wide it gets along the main axis. flex-basis is the starting size (auto by default: the width of the content). flex-grow says how much of the free room the item gets: 0 by default, so nothing. flex-shrink says how much it shrinks when there's too little room: 1 by default.

An item with flex-grow: 1 takes all the free room; two items with flex-grow: 1 share it fairly.

The shorthand flex: 1 means flex-grow: 1, flex-shrink: 1 and flex-basis: 0. Because every item then starts from zero, they all become equally wide.

style.css

1.square {2  display: flex;3}4.taco {5  flex-grow: 1;6}

foodtruck.example

Try it yourself

Put the programme cards side by side, equally wide, with 16px of room between them.

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 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Growing, shrinking and a starting size

An item with flex-grow: 1 takes all the free room; two items with flex-grow: 1 share it fairly.

The shorthand flex: 1 means flex-grow: 1, flex-shrink: 1 and flex-basis: 0. Because every item then starts from zero, they all become equally wide.

style.css

1.square {2  display: flex;3}4.taco {5  flex-grow: 1;6}

foodtruck.example

Try it yourself

Put the programme cards side by side, equally wide, with 16px of room between them.

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