CSS Flexbox Generator
Visual flexbox builder with container + per-item controls (flex-grow/shrink/basis/order/align-self) and 6 layout presets. Free, offline, client-side, instant.
Build flexbox layouts visually with container AND per-item controls (flex-grow, flex-shrink, flex-basis, order, align-self). 6 real-world layout presets including holy grail, sticky footer, and sidebar. Click any preview item to customize it.
Container properties
↑ Click any item in the preview to customize it below.
Per-item properties
CSS
HTML
How to Use CSS Flexbox Generator
- Pick a preset (holy grail, sidebar, sticky footer, equal columns, centered) or start from blank - preview updates instantly.
- Set container properties:
flex-direction,flex-wrap,justify-content(main axis),align-items(cross axis),align-content(multi-line wrap),gap. - Adjust the items slider to add or remove children (1-12).
- Click any item in the preview to select it - the per-item panel populates with its current settings.
- Customize the selected item:
flex-grow,flex-shrink,flex-basis,order(reorder visually without changing HTML),align-self(override container's align-items). - Copy the CSS (container rule + per-item rules using
:nth-child), the matching HTML snippet, or downloadflexbox.css.
Frequently Asked Questions
Why are my flex items overflowing instead of shrinking?
Usually min-width. Flex items default to min-width: auto, which means an item refuses to shrink below its content size, so a long unbreakable string (a URL, a wide table) blows the layout open. The fix is min-width: 0 on the offending item, often paired with overflow: hidden or text-overflow: ellipsis. The same applies vertically with min-height in column layouts.
What’s the difference between justify-content and align-items?
justify-content aligns items along the main axis. align-items aligns them along the cross axis. With flex-direction: row, main = horizontal and cross = vertical. With flex-direction: column, main = vertical and cross = horizontal – the axes swap. That swap confuses everyone the first time.
What’s flex-basis vs width?
flex-basis is the item’s starting size BEFORE flex-grow / flex-shrink redistribute extra space. width (or height in column direction) is the rigid target. When both are set, flex-basis wins for flex calculations. flex-basis: 0 means “ignore content size, distribute all space via flex-grow” – that’s why equal columns use flex: 1 1 0.
What does the flex shorthand mean?
flex: 1 = flex: 1 1 0% (grow, shrink, basis). flex: auto = flex: 1 1 auto. flex: none = flex: 0 0 auto. The generated CSS uses shorthand when all three are set explicitly, otherwise uses individual properties for clarity.
Why is align-content not working?
align-content only takes effect when there are multiple lines of wrapped items – i.e. when flex-wrap is wrap or wrap-reverse AND items actually wrap. With flex-wrap: nowrap, the property is silently ignored. The tool omits it from CSS output in that case.
Does the order property reorder the DOM?
No. order reorders items visually only. Screen readers and tab navigation still follow source order, which can hurt accessibility if order changes the logical reading flow. Use order for purely visual rearrangement (e.g. swapping mobile/desktop layout) – not for content that should be read in the new order.
What’s the difference between space-between, space-around, space-evenly?
space-between: equal gaps between items, NO space at the edges. space-around: equal gaps around each item – edge gaps are HALF the size of inter-item gaps. space-evenly: all gaps equal, including edges. With space-evenly, the edge-to-item distance equals item-to-item distance.
What’s the Holy Grail layout?
A 3-column layout (left sidebar / main content / right sidebar) where the sidebars are fixed-width and the main column flexes to fill remaining space. Named after the historically-difficult-to-implement web layout. With flexbox it’s just display: flex + flex: 0 0 200px on sidebars + flex: 1 1 0 on main.
flexbox vs grid?
Flexbox is 1-dimensional (row OR column at a time). Grid is 2-dimensional (rows AND columns simultaneously). Use flexbox for nav bars, button groups, card rows, and per-axis item alignment. Use grid for full-page layouts, image galleries, dashboards, and any 2-axis structure. They compose: a grid cell can contain a flex container, and vice versa.
Is my data secure?
Yes. The tool runs entirely in your browser. Nothing is uploaded – no settings, no CSS output, no analytics on what you build.