CSS Flexbox Generator
Visually choose the properties of a Flexbox container (direction, alignment, spacing, wrapping) and get the corresponding CSS code, with a live preview.
How it works
Flexbox is the most widely used CSS layout system for aligning elements along an axis (row or column). This tool saves you from memorizing the exact values of justify-content or align-items: adjust the dropdowns and copy the generated CSS block directly into your stylesheet.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (defined by flex-direction), while align-items aligns them along the cross axis (the secondary axis).
When should I enable flex-wrap?
Enable it when you want items to move to the next line once they no longer fit within the container's width, instead of being squeezed or overflowing.
100% local processing: the code is generated entirely in your browser via WebAssembly.