Flexbox container
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which CSS declaration turns an element into a flex container?
2. What does flex-direction: column do?
3. What does flex-wrap: wrap do?
4. Which property aligns flex items along the main axis?
5. True or false: align-items: center centres items along the main axis.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1nav { display: flex; flex-direction: row; gap: 16px; } | ASpreads items evenly along the main axis with no edge gaps, and centres them on the cross axis | |
| 2div { display: flex; justify-content: space-between; align-items: center; } | Bnav { display: flex; flex-wrap: wrap; } | |
| 3display: flex turns an element into a flex container — its direct children become flex items | Csection { display: flex; flex-direction: column; } | |
| 4flex-wrap: wrap allows flex items to flow onto new lines when space runs out | DCSS uses American English spelling — the correct value is justify-content: center; not centre; | |
| 5nav { display: flexbox; } | E'flexbox' is not a valid display value — use display: flex; to create a flex container | |
| 6div { justify-content: centre; } | FCreates a horizontal flex container with 16px gaps between each child item |
C
Definitions
display: flex
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
nav { display: ____; }
2.
div { ______________: row; }
3.
div { flex-direction: ___; }
4.
nav { display: flex; _________: wrap; }
5.
nav { _______________: center; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
nav { display flex; }
B
div { flex-direction: row; }
C
p { flex-wrap: wrap; }
Question 2
A
nav { display: flex; }
B
div { flex-direction: rows; }
C
section { flex-wrap: wrap; }
Question 3
A
nav { display: flex; }
B
div { flex-direction: row; }
C
section { Flex-wrap: wrap; }
Question 4
A
nav { display: flex; }
B
div { flex-direction: row; }
C
section { flex-wrap: wrap; }
D
p { justify-content: centre; }
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; }
Answer Key
Flexbox container
Section A: Quick Questions
Q1
B — display: flex
Q2
A — Lays flex items out vertically (top to bottom)
Q3
A — Allows items to move onto new lines when they run out of space
Q4
B — justify-content
Q5
A — False
Section B: Match the Pairs
Q1
nav {
display: flex;
flex-direction: row;
gap: 16px;
} → Creates a horizontal flex container with 16px gaps between each child item
Q2
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
Q3
display: flex turns an element into a flex container — its direct children become flex items → section {
display: flex;
flex-direction: column;
}
Q4
flex-wrap: wrap allows flex items to flow onto new lines when space runs out → nav {
display: flex;
flex-wrap: wrap;
}
Q5
nav { display: flexbox; } → 'flexbox' is not a valid display value — use display: flex; to create a flex container
Q6
div { justify-content: centre; } → CSS uses American English spelling — the correct value is justify-content: center; not centre;
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
nav { display: flex; }Q2
div { flex-direction: row; }Q3
div { flex-direction: row; }Q4
nav { display: flex; flex-wrap: wrap; }Q5
nav { justify-content: center; }Section E: Spot the Error
Q1
A — CSS declarations require a colon. It should be display: flex; not display flex;
Q2
B — 'rows' is not a valid value. The correct value is flex-direction: row; (singular).
Q3
C — CSS property names must be lowercase. 'Flex-wrap' should be written as 'flex-wrap'.
Q4
D — 'centre' is not a valid value. CSS uses American English spelling: justify-content: center;
Q5
E — 'streetch' is a typo. The correct value is align-items: stretch;