CSS, with the layout showing

Forty steps through flexbox, twenty-two builds that fail unless several concepts are right at once, and the famous wtfs underneath — margin collapsing, stacking contexts, and the invisible wall inside every flex item. This is the one subject where the output IS the picture, so every problem is rendered rather than described.

Problems

28 problems

All topics Advanced Alignment Distributing space Gap Main axis vs cross axis Making a flex container Order Sizing The famous WTFs The min-width:auto floor Wrapping and the align-content trap

Easy Medium Hard|Teaching step Predict the render Build it Explain the wtf

#	title	topic	type	difficulty
1	display: flex changes the children, not the box	Making a flex container	Teaching step	Easy
2	flex-direction: column swaps which axis is which	Main axis vs cross axis	Teaching step	Easy
3	justify-content is the main axis, align-items is the cross axis	Alignment	Teaching step	Easy
4	align-items: stretch is the default	Alignment	Teaching step	Easy
5	align-self overrides the container	Alignment	Teaching step	Easy
6	align-self works. justify-self does nothing.	Alignment	Teaching step	Medium
7	Where justify-content's free space went	Alignment	Teaching step	Medium
8	justify-content distributes free space — and sometimes there is none	Distributing space	Teaching step	Easy
9	space-between vs space-around vs space-evenly	Distributing space	Teaching step	Medium
10	The centred box you cannot scroll to	Distributing space	Teaching step	Hard
11	flex-basis is the size before flexing	Sizing	Teaching step	Medium
12	The width that is being ignored	Sizing	Teaching step	Medium
13	flex-grow distributes the surplus, not the container	Sizing	Teaching step	Easy
14	Both panels shrink. One of them shrinks twice as hard.	Sizing	Teaching step	Hard
15	What flex: 1 actually expands to	Sizing	Teaching step	Medium
16	flex: 2 deleted the flex-basis above it	Sizing	Teaching step	Medium
17	flex-shrink: 0 is defensive CSS	Sizing	Teaching step	Easy
18	gap spaces items without touching them	Gap	Teaching step	Easy
19	flex-wrap: wrap turns one line into many	Wrapping and the align-content trap	Teaching step	Easy
20	align-content does nothing on a single line	Wrapping and the align-content trap	Teaching step	Medium
21	wrap-reverse, and every cross-axis keyword flipping with it	Wrapping and the align-content trap	Teaching step	Medium
22	The last row that will not line up	Wrapping and the align-content trap	Teaching step	Hard
23	Breaking a flex line where you want it	Wrapping and the align-content trap	Teaching step	Hard
24	order: 1 sent it to the back	Order	Teaching step	Medium
25	The flex item that refuses to shrink	The min-width:auto floor	Teaching step	Hard
26	The truncation that will not truncate	The min-width:auto floor	Teaching step	Hard
27	The scroll pane that will not scroll	The min-width:auto floor	Teaching step	Hard
28	The Flexbox Holy Albatross	Advanced	Teaching step	Hard

44 of 87 catalogue topics are authored, with 37 drills rehearsing them. Every one of them is judged: each carries a starter that has been shown to fail, at least two different correct answers that have been shown to pass, and a set of near-misses and cheats that have been shown to be caught. Nothing reaches this list until all of that holds.