Flexbox Builder
Set direction, wrapping, alignment and spacing, then edit each item’s flex sizing and order. Use a row, centered, wrapping-card or vertical-stack preset as a starting point.
Main-axis spacing uses justify-content; cross-axis alignment uses align-items. align-content controls multiple wrapped lines. Fixed item heights mean stretch may not visibly change their size.
Items
Live preview
Scroll the preview if the fixed container is wider than your screen. Background, borders and labels are preview decoration; only layout CSS is exported.
A QUICK WALKTHROUGH
How to use this tool
- Choose a preset and set the container properties and pixel size.
- Add up to 12 items and edit grow, shrink, basis, order, align-self, width and height.
- Review the live preview, copy or download CSS, and use matching parent and child classes.
Container and item properties
Includes all four directions, three wrap modes, main-axis distribution, align-items, align-content and gap. Each item supports grow/shrink 0–20, auto or numeric px/% basis, integer order −100–100, align-self, width 0–600px and height 0–400px. Container width is 100–1200px, height 80–600px, and gap 0–100px.
Understand the axes
justify-content follows the main axis; align-items follows the cross axis. align-content affects multiple wrapped lines. Explicit width/height can prevent stretch from resizing an item. Grow, shrink and basis may make the resulting main-axis size differ from the specified width or height. Order changes visual placement, not DOM or reading order.
Local CSS output
The preview uses the exported layout values, including zero minimum sizes and border-box item sizing. Colors, borders and labels are preview decoration. Export includes container/item classes only, not HTML, SCSS, Tailwind or media queries. No content is uploaded or stored. Real content and surrounding styles can change the final layout.
GOOD TO KNOW
Common questions
Why does align-content seem unchanged?
It controls multiple flex lines. Enable wrap and use enough items to create more than one line.
Does order change accessibility reading order?
No. It changes visual layout only. Keep your HTML source order meaningful.