wtf(css)layout you can see happening
← wtf(css)
Teaching step

align-content does nothing on a single line

MediumWrapping and the align-content trapF31

align-content: center was in the stylesheet, spelled correctly, applying to the right element, in DevTools, not crossed out. The row did not move one pixel.

Three dots, packed against the start of the strip. Centre them top to bottom. The starter contains the single most common wrong answer in flexbox, and the reason it is so common is that it produces no feedback of any kind — no error, no warning, no strikethrough in DevTools, and no movement. There is more than one right answer, and one of them keeps the property from the starter. Working out why that one starts working is the whole lesson.

Hint

What does `align-content` align — and does this container currently have any of those to align?

Live preview800×420
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="strip"><div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div></div>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.strip { width: 600px; height: 240px; background: #16161d; }
.dot { width: 80px; height: 80px; border-radius: 50%; background: #ffd166; }
.d2 { background: #7bdff2; }
.d3 { background: #b5e48c; }