CSS Flexbox Generator
Visually build Flexbox layouts with live preview and copy-ready CSS for container and items.
How to Use
- Adjust flex-direction, justify-content, align-items, and flex-wrap using the dropdowns.
- Set the gap and number of preview items to match your layout.
- Watch the live preview update instantly.
- Copy the generated container CSS.
When to Use This
- Settling an argument about whether a navigation bar wants space-between or space-around, by switching between them and looking at the result.
- Showing someone why align-items stops behaving as they expect once flex-direction changes to column, with the preview making the flip visible.
- Getting a starting container rule for a toolbar, then pasting it into a stylesheet and writing the item rules yourself.
Frequently Asked Questions
About This Tool
Flexbox lays items out along one axis and distributes the space left over. What trips people up is that the axis is not fixed: flex-direction decides which direction is the main axis, and justify-content always works along the main axis while align-items always works across it. Set direction to column and those two properties swap the visual direction they control. Free space only exists when the container is larger than its content, which is why justify-content sometimes appears to do nothing at all.
The page writes a single container rule from four dropdowns and two sliders, covering flex-direction, justify-content, align-items, flex-wrap and a gap from 0 to 50 pixels. The preview holds between one and eight fixed 60-pixel squares, and the same values are applied directly to that container, so what you are looking at is the browser's own layout engine rather than a drawing of it.
Notes & Limits
- Only the container rule is produced. Item properties such as flex-grow, flex-shrink, flex-basis, order and align-self are left for you to write.
- Preview items are fixed 60-pixel squares with an explicit height, so align-items: stretch has nothing to stretch and looks identical to flex-start.
- align-content, which spaces the lines apart once content wraps onto several rows, is not among the controls and never appears in the output.
- The gap slider is whole pixels from 0 to 50. Separate row and column gaps, or gaps given in rem or percent, have to be written manually.