🎮 Flexbox Playground
Master CSS Flexbox with interactive controls and real-time preview
⚙️ Flexbox Controls
📐 Flex Direction
Controls the direction items flow in the container
🎯 Justify Content
Aligns items along the main axis
⬆️ Align Items
Aligns items along the cross axis
🔄 Flex Wrap
Controls whether items wrap to new lines
📏 Gap
Space between flex items
💡 Pro Tip: Try combining
wrap with space-between to see how items distribute across multiple lines!
👁️ Live Preview
1
2
3
4
5
📝 Generated CSS Code
✅ Code copied to clipboard!