🎨 CSS Flexbox Playground
Visual flexbox builder. Tweak controls → see live preview → copy CSS / Tailwind.
👁️ Live Preview
1
2
3
4
5
flex-direction
flex-wrap
justify-content (main axis)
align-items (cross axis)
gap: 8px
Number of items: 5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;Tailwind
flex flex-row justify-start items-stretch flex-nowrap gap-2📚 Flexbox Quick Tips
- 🎯 justify-content: aligns items along main axis (flex-direction)
- 🎯 align-items: aligns items along cross axis (perpendicular)
- 📐 row: main axis is horizontal | column: main axis is vertical
- 🔄 flex-wrap: allows items to wrap to new line
- 📏 gap: modern way to space items (replaces margin hacks)