๐ฆ Flexbox Generator
1
2
3
4
CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;
}Adjust Flexbox properties โ flex-direction, justify-content, align-items, flex-wrap, and gap โ with a live preview. Copy the generated CSS code directly into your stylesheet. Handy for tracking down a layout bug or prototyping a new layout.
How to use
- Adjust each property (direction, wrapping, main-axis/cross-axis alignment) with the dropdowns and sliders.
- The preview above updates in real time as the boxes rearrange.
- Use "Copy" to copy the generated CSS code and paste it into your stylesheet.
FAQ
What's the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the flex-direction), while align-items controls alignment along the cross axis (perpendicular to the main axis).
What does changing the item count do?
It changes how many boxes appear in the preview, making it easier to see how wrapping and justify-content behave. It has no effect on the generated CSS code.
Can I set align-self on individual items?
No, the current version only generates properties for the container as a whole.