🧱 Flexbox Playground
Interactive CSS Flex Layout Builder — gen8x.com
Free mode
🎛️ Container
flex-direction
row
row-reverse
column
column-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
flex-wrap
nowrap
wrap
wrap-reverse
gap
px
Items:
4
+ Add
− Remove
↺ Reset
🧩 Per‑item properties
Select item above, then adjust values.
👁️ Live preview
CSS code
/* flex container */
/* items */
🎯 Challenge: Match this layout
Puzzle 1
Puzzle 2
Puzzle 3
Puzzle 4
Puzzle 5
Exit challenge