← HTML & CSS

Flexbox alignment

A CSS flexbox property on the container that aligns all flex items along the cross axis (perpendicular to flex-direction). Values: stretch, center, flex-start, flex-end.

Part of: HTML and CSS Journey — Module 52

What it does: justify-content: center pushes all flex items to the centre of the main axis (horizontally for flex-direction: row). space-between places equal gaps between items only. space-around adds equal gaps on each side of every item, including at the edges. CSS uses American English. The correct value is 'center', not 'centre'. Using 'centre' will be silently ignored.

Common mistakes: CSS declarations require a colon. It should be justify-content: center; not justify-content centre;. 'middle' is not a valid align-items value. Use align-items: center; to centre items on the cross axis.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Flexbox alignment (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which property aligns flex items along the main axis?

justify-contentalign-items

Matches

div { align-items: middle; }

↓

'middle' is not a valid align-items value — use align-items: center; to centre on the cross axis

Applying

Meanings

Term

align-items

Meaning

A CSS flexbox property on the container that aligns all flex items along the cross axis (perpendicular to flex-direction). Values: stretch, center, flex-start, flex-end.

Practice

nav {

Testing

Gaps

nav { display: flex; : center; }

Check Answer

Spots

1nav { justify-content centre; }

2div { align-items: center; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which property aligns flex items along the main axis?

A. justify-content ✓

B. align-items

justify-content controls the main axis (set by flex-direction). align-items controls the cross axis (perpendicular to flex-direction).

2. What does align-items: center do?

A. Centres items along the cross axis ✓

B. Centres items along the main axis

align-items targets the cross axis. To centre along the main axis, use justify-content: center;

3. Which justify-content value puts equal gaps between items with no space at the outer edges?

A. space-between ✓

B. space-around

space-between places equal gaps between items only. space-around adds equal gaps on each side of every item, including at the edges.

4. True or false: align-self overrides align-items for a single flex item.

A. True ✓

B. False

align-self is set on a flex item, not the container. It overrides the container's align-items value for that one item only.

5. True or false: align-items: stretch is the default value.

A. True ✓

B. False

stretch is the default — flex items stretch to fill the container's cross axis if they have no fixed size in that direction.

Match the Pairs

nav { display: flex; justify-content: space-between; align-items: center; } → Items are spread evenly along the main axis with no edge gaps, and centred vertically on the cross axis

.card { align-self: flex-end; } → Overrides the container's align-items for this one card — positions it at the end of the cross axis

justify-content controls spacing and alignment along the main axis → footer { display: flex; justify-content: center; }

align-items aligns all flex items on the cross axis — overridden per item by align-self → div { display: flex; align-items: flex-start; }

div { align-items: middle; } → 'middle' is not a valid align-items value — use align-items: center; to centre on the cross axis

div { justify-content: centre; } → CSS uses American English spelling — the correct value is justify-content: center; not centre;

Key Term

align-items

A CSS flexbox property on the container that aligns all flex items along the cross axis (perpendicular to flex-direction). Values: stretch, center, flex-start, flex-end.

Fill in the Blanks

1. nav { display: flex; align-items: center; }

Hint: Type the flexbox property name that aligns items along the cross axis

2. div { display: flex; align-items: center; }

Hint: Type the alignment value that centres flex items on the cross axis

3. nav { justify-content: space-between; }

Hint: Type the flexbox property name that aligns items along the main axis

4. div { align-self: flex-end; }

Hint: Type the flexbox property name that overrides align-items for a single flex item

5. nav { justify-content: space-between; }

Hint: Type the justify-content value that puts equal space between items with none at the edges

Spot the Error

Question 1

A nav { justify-content centre; }

B div { align-items: center; }

C section { display: flex; }

Line A — CSS declarations require a colon. It should be justify-content: center; not justify-content centre;

Question 2

A nav { display: flex; }

B div { align-items: middle; }

C section { justify-content: center; }

Line B — 'middle' is not a valid align-items value. Use align-items: center; to centre items on the cross axis.

Question 3

A nav { display: flex; }

B div { justify-content: space-between; }

C section { Align-items: center; }

Line C — CSS property names must be lowercase. 'Align-items' should be written as 'align-items'.

Question 4

A nav { display: flex; }

B div { align-items: flex-start; }

C section { justify-content: center; }

D header { align-content: stretchy; }

Line D — 'stretchy' is not a valid value. The correct value is align-content: stretch;

Question 5

A nav { display: flex; }

B div { align-items: center; }

C section { justify-content: flex-start; }

D header { align-content: space-between; }

E footer { align-self: centre; }

Line E — 'centre' is not a valid value. CSS uses American English: align-self: center;

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?