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
8 problemsAll topicsAdvancedAlignmentDistributing spaceGapMain axis vs cross axisMaking a flex containerOrderSizingThe famous WTFsThe min-width:auto floorWrapping and the align-content trap
| # | title | topic | type | difficulty |
|---|---|---|---|---|
| 1 | The centred box you cannot scroll to | Distributing space | Teaching step | Hard |
| 2 | Both panels shrink. One of them shrinks twice as hard. | Sizing | Teaching step | Hard |
| 3 | The last row that will not line up | Wrapping and the align-content trap | Teaching step | Hard |
| 4 | Breaking a flex line where you want it | Wrapping and the align-content trap | Teaching step | Hard |
| 5 | The flex item that refuses to shrink | The min-width:auto floor | Teaching step | Hard |
| 6 | The truncation that will not truncate | The min-width:auto floor | Teaching step | Hard |
| 7 | The scroll pane that will not scroll | The min-width:auto floor | Teaching step | Hard |
| 8 | 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.