Learn HTML and CSS: Spreading rows

Align-content

The narrow little square is deep too. The two rows of trucks stretch over the whole depth, with the trucks lost in their row. Nadia wants the rows together, at the back by the church.

Spreading the rows themselves

With several rows and room left on the cross axis, align-content spreads the rows, the way justify-content spreads the items: flex-start, flex-end, center, space-between, space-around and space-evenly.

By default the rows stretch until they fill the container. align-items lines up each item within its own row; align-content moves the rows themselves.

Without flex-wrap: wrap there's only one row, and it fills the whole height: then align-content does nothing.

style.css

1.square {2  display: flex;3  flex-wrap: wrap;4  align-content: space-between;5}

foodtruck.example

Try it yourself

Put the rows of trucks together at the back of the little square, at the bottom, against the church.

1.square {2  display: flex;3  flex-wrap: wrap;4}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="square narrow tall">4    <div class="truck chips">Chips</div>5    <div class="truck taco">Tacos</div>6    <div class="truck pizza">Pizza</div>7    <div class="truck waffle">Waffles</div>8    <div class="truck curry">Curry</div>9  </section>10</main>

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

Every numbered item belongs on the dashed outline with the same number.

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

Spreading the rows themselves

By default the rows stretch until they fill the container. align-items lines up each item within its own row; align-content moves the rows themselves.

Without flex-wrap: wrap there's only one row, and it fills the whole height: then align-content does nothing.

style.css

1.square {2  display: flex;3  flex-wrap: wrap;4  align-content: space-between;5}

foodtruck.example

Try it yourself

Put the rows of trucks together at the back of the little square, at the bottom, against the church.

1.square {2  display: flex;3  flex-wrap: wrap;4}

1<link rel="stylesheet" href="style.css">2<main>3  <section class="square narrow tall">4    <div class="truck chips">Chips</div>5    <div class="truck taco">Tacos</div>6    <div class="truck pizza">Pizza</div>7    <div class="truck waffle">Waffles</div>8    <div class="truck curry">Curry</div>9  </section>10</main>

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

Every numbered item belongs on the dashed outline with the same number.