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

17 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	align-self works. justify-self does nothing.	Alignment	Teaching step	Medium
2	Where justify-content's free space went	Alignment	Teaching step	Medium
3	space-between vs space-around vs space-evenly	Distributing space	Teaching step	Medium
4	flex-basis is the size before flexing	Sizing	Teaching step	Medium
5	The width that is being ignored	Sizing	Teaching step	Medium
6	What flex: 1 actually expands to	Sizing	Teaching step	Medium
7	flex: 2 deleted the flex-basis above it	Sizing	Teaching step	Medium
8	align-content does nothing on a single line	Wrapping and the align-content trap	Teaching step	Medium
9	wrap-reverse, and every cross-axis keyword flipping with it	Wrapping and the align-content trap	Teaching step	Medium
10	order: 1 sent it to the back	Order	Teaching step	Medium
11	height: 100% does nothing	The famous WTFs	Explain the wtf	Medium
12	A float-only parent has no height	The famous WTFs	Explain the wtf	Medium
13	Vertical centring before flexbox	The famous WTFs	Explain the wtf	Medium
14	The box does not grow for you	The famous WTFs	Explain the wtf	Medium
15	line-height: 1.5 vs 150%	The famous WTFs	Explain the wtf	Medium
16	em compounds; rem doesn't	The famous WTFs	Explain the wtf	Medium
17	!important is not a specificity boost	The famous WTFs	Explain the wtf	Medium

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.