Grid CanyonISSUE #11 of 27

flex container · direction · wrap · gap

FlexboVSThe Float Phantom

Flexbo saysflex-direction, flex-wrap, and gap set the axis and spacing of a flex container.

flex-direction chooses the main axis: row (default), column, or reverses. flex-wrap:wrap lets items flow onto new lines instead of squishing. gap spaces items cleanly. The shorthand flex-flow combines direction and wrap.

Power-ups you unlock

flex-direction: row | column (+ reverses)
flex-wrap:wrap allows multiple lines
gap spaces items with no margin hacks
flex-flow = direction + wrap shorthand

The Float Phantom attacks — common mistakes

Items overflowing because wrap is off
Using margins for gaps instead of gap
Reversing direction and confusing source vs visual order

Boss battleBuild a wrapping row of chips, then switch the container to a column.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.f{display:flex;flex-wrap:wrap;gap:8px}.f span{background:#b388ff;color:#06040d;padding:6px 12px;border-radius:999px}</style></head><body style="background:#06040d;padding:20px"><div class="f"><span>one</span><span>two</span><span>three</span><span>four</span></div></body></html>

▶ Open the interactive comic issue

‹ Flexbox · The One-Dimensional Layout Flex Container · Justify-Content · Align-Items ›