HTML & CSS · Flexbox · Lesson 11 of 25

justify-content and align-items

Concept

justify-content and align-items

justify-content controls spacing along the main axis, and align-items controls alignment along the cross axis.

By default the main axis is horizontal (a row), so justify-content controls left-right spacing and align-items controls top-bottom alignment — both flip if flex-direction is column.

By the end of this lesson

Explain the core idea behind justify-content and align-items.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

Syntax

.selector {
  justify-content: flex-start | center | space-between | space-around;
  align-items: flex-start | center | flex-end | stretch;
}

ExampleRunnable

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

Try it Yourself »

Perfectly centering one item

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Note: This two-line combination is the classic Flexbox trick for centering anything, both horizontally and vertically.

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in justify-content and align-items. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Center three items both horizontally and vertically in a flex container.

Loading editor…

Console

Output will appear here...