Flexbox alignment
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which property aligns flex items along the main axis?
2. What does align-items: center do?
3. Which justify-content value puts equal gaps between items with no space at the outer edges?
4. True or false: align-self overrides align-items for a single flex item.
5. True or false: align-items: stretch is the default value.
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; justify-content: space-between; align-items: center; } | Afooter { display: flex; justify-content: center; } | |
| 2.card { align-self: flex-end; } | BItems are spread evenly along the main axis with no edge gaps, and centred vertically on the cross axis | |
| 3justify-content controls spacing and alignment along the main axis | C'middle' is not a valid align-items value — use align-items: center; to centre on the cross axis | |
| 4align-items aligns all flex items on the cross axis — overridden per item by align-self | DCSS uses American English spelling — the correct value is justify-content: center; not centre; | |
| 5div { align-items: middle; } | Ediv { display: flex; align-items: flex-start; } | |
| 6div { justify-content: centre; } | FOverrides the container's align-items for this one card — positions it at the end of the cross axis |
C
Definitions
align-items
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
nav { display: flex; ___________: center; }
2.
div { display: flex; align-items: ______; }
3.
nav { _______________: space-between; }
4.
div { __________: flex-end; }
5.
nav { justify-content: _____________; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
nav { justify-content centre; }
B
div { align-items: center; }
C
section { display: flex; }
Question 2
A
nav { display: flex; }
B
div { align-items: middle; }
C
section { justify-content: center; }
Question 3
A
nav { display: flex; }
B
div { justify-content: space-between; }
C
section { Align-items: center; }
Question 4
A
nav { display: flex; }
B
div { align-items: flex-start; }
C
section { justify-content: center; }
D
header { align-content: stretchy; }
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; }
Answer Key
Flexbox alignment
Section A: Quick Questions
Q1
B — justify-content
Q2
A — Centres items along the cross axis
Q3
A — space-between
Q4
A — True
Q5
B — True
Section B: Match the Pairs
Q1
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
Q2
.card { align-self: flex-end; } → Overrides the container's align-items for this one card — positions it at the end of the cross axis
Q3
justify-content controls spacing and alignment along the main axis → footer {
display: flex;
justify-content: center;
}
Q4
align-items aligns all flex items on the cross axis — overridden per item by align-self → div {
display: flex;
align-items: flex-start;
}
Q5
div { align-items: middle; } → 'middle' is not a valid align-items value — use align-items: center; to centre on the cross axis
Q6
div { justify-content: centre; } → CSS uses American English spelling — the correct value is justify-content: center; not centre;
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
nav { display: flex; align-items: center; }Q2
div { display: flex; align-items: center; }Q3
nav { justify-content: space-between; }Q4
div { align-self: flex-end; }Q5
nav { justify-content: space-between; }Section E: Spot the Error
Q1
A — CSS declarations require a colon. It should be justify-content: center; not justify-content centre;
Q2
B — 'middle' is not a valid align-items value. Use align-items: center; to centre items on the cross axis.
Q3
C — CSS property names must be lowercase. 'Align-items' should be written as 'align-items'.
Q4
D — 'stretchy' is not a valid value. The correct value is align-content: stretch;
Q5
E — 'centre' is not a valid value. CSS uses American English: align-self: center;