CSS Flexbox Generator
Build CSS flexbox layouts visually — set direction, justification, alignment, wrapping and gap, then watch the preview update live. Copy the generated container CSS straight into your project.
How to use
- Choose direction, justify and align values from the dropdowns.
- Adjust gap and item count while watching the preview.
- Copy the CSS for your own container class.
Note: Item heights vary on purpose so align-items effects (especially stretch and baseline) are easy to see.
Tips
- Start with justify-content: center and align-items: center for quick card centring.
- Use gap instead of margins between items — it handles edges more cleanly.
- Combine flex-wrap: wrap with a max-width container for responsive rows.