0Pricing
CSS Academy · Lesson

Justify-Content and Align-Items

Distribute items along the main axis and cross axis using justify-content and align-items.

Justify-Content and Align-Items is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two Key Alignment Properties

The two most used flex alignment properties are:

  • justify-content — aligns items along the main axis
  • align-items — aligns items along the cross axis

justify-content: flex-start

flex-start (default) packs items toward the start of the main axis. In row direction, items align to the left.

.nav {
  display: flex;
  justify-content: flex-start; /* default */
}

justify-content: center

Centers items along the main axis. The classic horizontal centering technique with flexbox.

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

justify-content: flex-end

Packs items toward the end of the main axis (right side in row direction).

.header {
  display: flex;
  justify-content: flex-end; /* right-align children */
}

justify-content: space-between

Distributes items with equal space between them. First item is at start, last item is at end — no space at edges.

.nav {
  display: flex;
  justify-content: space-between;
  /* logo at left, links at right */
}

justify-content: space-around

Places equal space around each item. Edge items get half the space of inner gaps. Visually, the edges have half as much padding as between items.

justify-content: space-evenly

All gaps (including edges) are equal. Unlike space-around, edge padding equals inter-item gaps.

.toolbar {
  display: flex;
  justify-content: space-evenly;
}

align-items: stretch (Default)

stretch (default) makes all flex items on the cross axis fill the container's cross size. Items in a row container all become the same height.

.row {
  display: flex;
  align-items: stretch; /* default — all children same height */
}

align-items: center

Centers items on the cross axis. In a row container, this vertically centers items. The classic vertical centering solution.

.card {
  display: flex;
  align-items: center; /* vertically center all items */
}

align-items: flex-start and flex-end

flex-start aligns items to the cross-start edge (top in row). flex-end aligns to the cross-end edge (bottom in row).

.nav {
  display: flex;
  align-items: flex-end; /* items bottom-aligned */
}

align-items: baseline

Aligns items so their text baselines align. Useful when items have different font sizes but should look visually aligned.

.breadcrumb {
  display: flex;
  align-items: baseline;
}

Quick Check

Which combination perfectly centers a flex item both horizontally and vertically within its container?

Recap

justify-content distributes items along the main axis with values like flex-start, center, space-between. align-items positions items on the cross axis with stretch, center, flex-start. Together they control both axes of alignment.

Frequently asked questions

Is the “Justify-Content and Align-Items” lesson free?

Yes — the full text of “Justify-Content and Align-Items” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Justify-Content and Align-Items”?

Distribute items along the main axis and cross axis using justify-content and align-items. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Justify-Content and Align-Items” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Display Flex and Flex Direction
  2. Justify-Content and Align-Items
  3. Flex Wrap and Align-Content
  4. Flex Grow Shrink and Basis
← Back to CSS Academy