← HTML & CSS

Flexbox container

Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.

Part of: HTML and CSS Journey — Module 51

What it does: display: flex on section makes it a flex container. flex-direction: column makes its children stack vertically. Without flex-wrap: wrap, items stay on one line and may overflow. wrap lets them break onto a new row or column. display: flex is the correct value. 'flexbox' is not valid — the property value is simply 'flex'. justify-content controls alignment along the main axis. align-items controls alignment along the cross axis. space-between puts equal gaps between items with none at the edges. space-around adds equal gaps on each side of each item, including at the edges. CSS property values use American English. 'centre' is British spelling and is not recognised. Use 'center'.

Common mistakes: CSS declarations require a colon. It should be display: flex; not display flex;. 'rows' is not a valid value. The correct value is flex-direction: row; (singular).

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 container (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which CSS declaration turns an element into a flex container?

display: flexdisplay: flexbox

Matches

nav { display: flexbox; }

↓

'flexbox' is not a valid display value — use display: flex; to create a flex container

Applying

Meanings

Term

display: flex

Meaning

Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.

Practice

nav {

Testing

Gaps

nav { display: ; }

Check Answer

Spots

1nav { display flex; }

2div { flex-direction: row; }

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 CSS declaration turns an element into a flex container?

A. display: flex ✓

B. display: flexbox

display: flex is the correct value. 'flexbox' is not valid — the property value is simply 'flex'.

2. What does flex-direction: column do?

A. Lays flex items out vertically (top to bottom) ✓

B. Lays flex items out horizontally (left to right)

flex-direction: column makes the main axis vertical. flex-direction: row (the default) makes it horizontal.

3. What does flex-wrap: wrap do?

A. Allows items to move onto new lines when they run out of space ✓

B. Prevents items from ever wrapping

flex-wrap: wrap allows overflow onto new lines. flex-wrap: nowrap (the default) keeps all items on one line even if they overflow.

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

A. justify-content ✓

B. align-items

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

5. True or false: align-items: center centres items along the main axis.

A. False ✓

B. True

align-items centres items along the cross axis (perpendicular to flex-direction), not the main axis. justify-content handles the main axis.

Match the Pairs

nav { display: flex; flex-direction: row; gap: 16px; } → Creates a horizontal flex container with 16px gaps between each child item

div { display: flex; justify-content: space-between; align-items: center; } → Spreads items evenly along the main axis with no edge gaps, and centres them on the cross axis

display: flex turns an element into a flex container — its direct children become flex items → section { display: flex; flex-direction: column; }

flex-wrap: wrap allows flex items to flow onto new lines when space runs out → nav { display: flex; flex-wrap: wrap; }

nav { display: flexbox; } → 'flexbox' is not a valid display value — use display: flex; to create a flex container

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

Key Term

display: flex

Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.

Fill in the Blanks

1. nav { display: flex; }

Hint: Type the display value that turns an element into a flex container

2. div { flex-direction: row; }

Hint: Type the flexbox property name that sets the main axis direction

3. div { flex-direction: row; }

Hint: Type the flex-direction value that lays items out horizontally left to right

4. nav { display: flex; flex-wrap: wrap; }

Hint: Type the flexbox property name that controls whether items wrap onto multiple lines

5. nav { justify-content: center; }

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

Spot the Error

Question 1

A nav { display flex; }

B div { flex-direction: row; }

C p { flex-wrap: wrap; }

Line A — CSS declarations require a colon. It should be display: flex; not display flex;

Question 2

A nav { display: flex; }

B div { flex-direction: rows; }

C section { flex-wrap: wrap; }

Line B — 'rows' is not a valid value. The correct value is flex-direction: row; (singular).

Question 3

A nav { display: flex; }

B div { flex-direction: row; }

C section { Flex-wrap: wrap; }

Line C — CSS property names must be lowercase. 'Flex-wrap' should be written as 'flex-wrap'.

Question 4

A nav { display: flex; }

B div { flex-direction: row; }

C section { flex-wrap: wrap; }

D p { justify-content: centre; }

Line D — 'centre' is not a valid value. CSS uses American English spelling: justify-content: center;

Question 5

A nav { display: flex; }

B div { flex-direction: column; }

C section { flex-wrap: wrap; }

D header { justify-content: center; }

E footer { align-items: streetch; }

Line E — 'streetch' is a typo. The correct value is align-items: stretch;

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?