LESSON 18

Flexbox Alignment

Learning objective: Align and justify flex items on both axes.

Understand

Flexbox alignment is controlled by two main properties.

justify-content aligns items along the main axis (e.g. space-between, center), and align-items aligns them along the cross axis (e.g. center, stretch). Together they let you center content perfectly.

Analogy: Think of justify-content as spacing along the shelf and align-items as lining items up top-to-bottom.

See It in Action

Perfect centering:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
How it works: With both axes centered, the child sits exactly in the middle of the 200px-tall container.

Try It Yourself

  1. Center a single item both horizontally and vertically.
  2. Use space-between on a nav.
  3. Try align-items: stretch.

Quick Quiz

Which property aligns items on the cross axis?

Challenge

Build a navbar with the logo left and links right using flex alignment.

Success condition: Your navbar spaces items correctly and vertically centers them.