Teaching step

The Flexbox Holy Albatross

HardAdvancedF44

The cards have to go from a row to a stack when the COMPONENT gets narrow — not when the window does. The same component sits in a full-width page and in a 400px sidebar, and a media query cannot tell the two apart.

Three cards in a deck. - When the deck is 900px, they sit in one row, 300px each, filling it. - When the deck is 500px, they become three full-width rows, stacked, touching. The switch has to happen at 40rem — 640px — of the deck's own width, and it has to be the deck's width, not the viewport's. Assume you are writing this in 2018 and @container does not exist yet. ⚠️ The technique this problem teaches is Heydon Pickering's Holy Albatross, published in 2018. The name is his.

Hint

`flex-basis` takes a length, and a length can be an expression. What happens to `40rem - 100%` as the container crosses 40rem — and what would you multiply that by to make both sides of zero useless as sizes and useful as behaviours?

Live preview1200×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="deck"><div class="card c1"></div><div class="card c2"></div><div class="card c3"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.deck { width: 900px; display: flex; flex-wrap: wrap; background: #16161d; }
.card { height: 80px; background: #7bdff2; }
.c2 { background: #b5e48c; }
.c3 { background: #ffd166; }