Flexbox

Line up and space out elements in a row or column with display flex.

Lesson 5 of 120% of the track complete

What you'll learn

How to put items side by side, space them evenly and centre them with flexbox.

Why it matters

Navigation bars, card rows and centred content are everywhere. Flexbox makes them a few lines of CSS instead of a fight.

Explanation

Flexbox works on a container and its direct children (the items). Set display: flex on the container and the items line up in a row.

Key properties on the container:

flex-direction: row (default) or column.
justify-content: how to distribute items along the main axis: flex-start, center, space-between, space-around.
align-items: how to align items on the other axis: stretch, center, flex-start.
gap: space between items.

On an item, flex: 1 makes it grow to share the leftover space.

Example

Step-by-step walkthrough

display: flex turns .row into a flex container, so the three items sit in a row.
justify-content: space-between pushes the first item to the left edge, the last to the right, and spreads the middle one.
align-items: center centres them vertically in the 120px height.
gap: 12px keeps a minimum space between items.

Try it yourself

Change justify-content to center, then to flex-end. Then set flex-direction: column and see what happens.

Flexbox playgroundHTML / CSS

Ctrl+Enter to run

Common mistakes

Putting display: flex on the items instead of the container.
Confusing the axes. justify-content follows the main direction, align-items the cross direction. They swap when you use column.
Expecting grandchildren to line up. Only direct children are flex items.
Forgetting a height when trying to centre vertically.

Quick quiz

Question 1 of 3

Which declaration turns an element into a flex container?

display: flex;flex: container;layout: flex;

Question 2 of 3

Which property spreads items along the main axis?

align-itemsjustify-contentgap

Question 3 of 3

What does flex-direction: column do?

Stacks items verticallyMakes items widerHides overflow

Summary

display: flex on the container lines items up.
justify-content, align-items and gap position and space them.
flex-direction: column switches to a vertical stack.

You finished the CSS beginner section. Next: grid, responsive design and transitions.

HTML

<style>
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #e2e8f0;
    padding: 12px;
    height: 120px;
  }
  .item {
    background: royalblue;
    color: white;
    padding: 16px;
    border-radius: 8px;
  }
</style>

<div class="row">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>