Teaching step

align-self overrides the container

EasyAlignmentF12

One badge in a toolbar needed to sit at the top while the rest sat at the bottom, and the fix was a wrapper div, a class, and forty minutes.

Four tokens in a row, packed against the start of the rack. Three of them sit on the bottom edge. The third one — the blue one — sits on the top edge. No wrapper divs. The markup is fixed and you cannot change it. There is one declaration that lets a single flex item disagree with its container, and it works on exactly one of the two axes.

Hint

Which axis is the disagreement on — and is that the axis flexbox lets an individual item speak for itself?

Live preview800×400

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="rack"><div class="token o1"></div><div class="token o2"></div><div class="token o3"></div><div class="token o4"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rack { width: 560px; height: 200px; background: #16161d; }
.token { width: 100px; height: 60px; background: #ffd166; }
.o3 { background: #7bdff2; }