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

37 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	Centre the brand mark in the masthead	Alignment	Build it	Easy
2	Centre the hero card — in a container that runs downwards	Main axis vs cross axis	Build it	Easy
3	Centre the unread count inside its pill	Alignment	Build it	Easy
4	Centre the empty-state message in the results panel	Alignment	Build it	Easy
5	Centre the glyph in the round action button	Alignment	Build it	Easy
6	Sit the editor tools in the middle of the rail	Alignment	Build it	Easy
7	Float the pinned tag to the front of the list	Order	Build it	Easy
8	Hold the terminal output at the bottom — in the order it was written	Distributing space	Build it	Easy
9	Newest activity at the top, list still hugging the top	Main axis vs cross axis	Build it	Easy
10	Flip your own chat messages to the right	Main axis vs cross axis	Build it	Easy
11	Reverse the wizard steps — and keep them on the left	Main axis vs cross axis	Build it	Easy
12	Drop the chips so they stack up from the floor	Main axis vs cross axis	Build it	Easy
13	The same dialog footer, and now they have to sit at the bottom	Alignment	Build it	Easy
14	Send the destructive button to the far end of the toolbar	Distributing space	Build it	Easy
15	Pin both team badges to the edges and centre the clock	Distributing space	Build it	Easy
16	Push the close button to the far edge of the modal header	Distributing space	Build it	Easy
17	Move the whole dialog button row to the trailing edge	Distributing space	Build it	Easy
18	Render Cancel before Save without touching the markup	Order	Build it	Easy
19	The two panels are `flex: 1` and one of them is still wider	Sizing	Build it	Easy
20	The same tiles, keeping the widths the design gave them	Sizing	Build it	Easy
21	Make the three metric tiles exactly equal width	Sizing	Build it	Easy
22	One flexible pane between two fixed rails	Sizing	Build it	Easy
23	Make the documents segment twice the size of the media one	Sizing	Build it	Easy
24	Stop the avatar squashing next to a long name	Sizing	Build it	Easy
25	Centre the card shelf and keep a 16px gutter	Gap	Build it	Easy
26	The same footer, and now the gaps have to be 32px	Gap	Build it	Easy
27	Put exactly 24px between the nav links	Gap	Build it	Easy
28	Give every toolbar button an equal share of space around it	Distributing space	Build it	Easy
29	The same bar, and now every gap has to be the same size	Distributing space	Build it	Easy
30	Spread the footer links from edge to edge	Distributing space	Build it	Easy

← Prev1 2 Next →

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.