Flexbox Playground

Tips

• • Use flex-direction to set the main axis (horizontal or vertical)
• • justify-content aligns items along the main axis
• • align-items aligns items along the cross axis
• • flex-wrap: wrap allows items to flow to the next line when they run out of space
• • gap controls spacing between flex items without margins
• • Add or remove items to see how your flex layout adapts