CSSLesson 7 of 10Jump to practice

Flexbox

Line items up in a row or column and share out the space between them.

Flexbox lines things up in one direction, a row or a column, and decides what to do with the leftover space. It’s the tool for navigation bars, rows of buttons, cards side by side and centring things.

Turn it on

Put display: flex on the parent. Its direct children line up in a row.

A flex row
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .row {
    display: flex;
    gap: 10px;
    background: #eef3f2;
    padding: 10px;
  }
  .item { background: #0b7a75; color: white; padding: 16px; font-family: sans-serif; }
</style>
</head>
<body>
<div class="row">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>
</body>
</html>
Result

Lining up: justify-content and align-items

A flex container has two directions:

  • The main axis runs along the row. justify-content controls it.
  • The cross axis runs across the row. align-items controls it.
justify-content Effect
flex-start Pack items at the start (the default)
center Pack them in the middle
space-between First item at the start, last at the end, equal gaps between
space-around Equal space around every item

Try changing space-between below to the other values.

A navigation bar
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #123b3c;
    padding: 10px 16px;
    font-family: sans-serif;
  }
  .logo { color: #f4b63f; font-weight: bold; font-size: 20px; }
  .links { display: flex; gap: 16px; }
  .links a { color: white; text-decoration: none; }
</style>
</head>
<body>
<nav>
  <span class="logo">Shop</span>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">Cart</a>
  </div>
</nav>
</body>
</html>
Result

Centring anything

The classic CSS puzzle, solved in three lines:

Center a box
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    background: #eef3f2;
  }
  .box { background: #f4b63f; padding: 20px; font-family: sans-serif; }
</style>
</head>
<body>
<div class="stage">
  <div class="box">I'm in the middle</div>
</div>
</body>
</html>
Result

Sharing space and wrapping

  • flex: 1 on an item lets it grow to fill the space. Give every item flex: 1 and they share it equally.
  • flex-wrap: wrap on the container lets items drop to a new line when they run out of room.
  • flex-direction: column stacks items top to bottom instead.
Cards that wrap
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .cards { display: flex; flex-wrap: wrap; gap: 12px; font-family: sans-serif; }
  .card {
    flex: 1 1 160px;   /* grow, shrink, start at 160px */
    background: #fff7e0;
    border: 1px solid #f1d58a;
    padding: 12px;
    border-radius: 8px;
  }
</style>
</head>
<body>
<div class="cards">
  <div class="card"><h3>HTML</h3><p>Structure</p></div>
  <div class="card"><h3>CSS</h3><p>Style</p></div>
  <div class="card"><h3>JavaScript</h3><p>Behavior</p></div>
</div>
</body>
</html>
Result

Open that last one in the editor and make the window narrower. The cards wrap onto new lines on their own.

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Turn the container into a flex container.

    .row {
  display: ;
}

  2. Exercise 2

    Put 16px of space between the items.

    .row {
  display: flex;
  : 16px;
}

  3. Exercise 3

    Center the items horizontally and vertically.

    .center {
  display: flex;
  justify-content: ;
  align-items: ;
}

Quiz: 3 questions

1. In a normal flex row, which direction does justify-content work in?
2. Every child has flex: 1. What happens?
3. Where does display: flex go?

Finish the practice to complete this lesson.