Breaking a flex line where you want it
Two tiles per row is the design. Three of them fit, so three of them go, and there is no break-after, no flex-break, no wrap-before — the property simply does not exist.
A 640px wrapping rail holding four 200px tiles. Three fit on a line, so the rail gives you 3 + 1.
Make it 2 + 2: tiles 1 and 2 on the top row, tiles 3 and 4 directly underneath with no gap between the rows.
Between tiles 2 and 3 there is an empty .brk element with height: 0, drawn with a dashed outline so you can see where it is. It is the only tool you have.
Hint
A line stops taking items when the next one will not fit. What would you have to be true of the spacer for nothing to ever fit beside it?
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="rail"><div class="t t1"></div><div class="t t2"></div><div class="brk"></div><div class="t t3"></div><div class="t t4"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .rail { width: 640px; height: 300px; display: flex; flex-wrap: wrap; align-content: flex-start; background: #16161d; } .t { flex: none; width: 200px; height: 80px; background: #7bdff2; } .t3, .t4 { background: #b5e48c; } .brk { height: 0; outline: 1px dashed #ff8fa3; }