CSS Flexbox Generator
Visual CSS Flexbox layout builder. Configure flex container and items with live preview. Generate flexbox code for responsive layouts. Free online flexbox playground
Flexbox solved one specific problem — laying out a single row or single column of items with intelligent space distribution — and it does that one thing well. The interesting question is not "how do I write flex CSS" but "is flex even the right answer here". For 2D grids, use Grid. For "stretch this row evenly", flex. This builder helps you author flex containers and items visually, with a live preview, and tells you which Grid-style problem you accidentally fell into when flex stops working.
When flex is the right tool
- Navbar with logo on the left, links on the right — `display:flex; justify-content:space-between`. Two lines of CSS, no media queries.
- A row of cards that should stretch to equal height — flex children stretch by default.
- Centering both axes — `display:flex; align-items:center; justify-content:center`. The "holy grail" CSS centering problem.
- A footer with three columns that should each take available space proportionally — `flex: 1` on each.
- A button bar where the cancel button stays small and the primary button stretches — different `flex-grow` per item.
When you actually want Grid, not flex
- A photo gallery in a 4-column layout — Grid: `grid-template-columns: repeat(4, 1fr)`. Flex with wrapping limps but does not size cells consistently.
- A dashboard with named regions (header, sidebar, main, footer) — Grid: `grid-template-areas`. Flex requires multiple nested wrappers.
- An item that spans 2 columns — Grid: `grid-column: span 2`. Flex has no concept of spanning.
- Vertical alignment across rows — Grid auto-aligns; flex aligns within a row only.
The decision rule: 1D layout (one row OR one column) → flex. 2D layout (rows AND columns with cross-row relationships) → Grid. Mixing them is fine — Grid for the page, flex for components inside cells.
Working example: a header with logo + nav + CTA
Input
Header: logo on left, nav links centered, "Sign up" button on right
Output
CSS:
.header {
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 2rem;
}
.nav {
display: flex;
gap: 1.5rem;
margin-left: auto; /* push nav to center-right */
margin-right: auto;
}
.cta {
margin-left: auto; /* push CTA to far right */
}
HTML:
<header class="header">
<div class="logo">Logo</div>
<nav class="nav">...</nav>
<a class="cta">Sign up</a>
</header>`margin-left: auto` on a flex child is the canonical way to push it (and everything after) to the right. Two `auto` margins on consecutive elements creates a "centered with sidebar pieces" layout without resorting to nested wrappers.
Properties you actually use
- `flex-direction` — row (default), column, row-reverse, column-reverse. Note: row/column is the "main axis"; the other is the "cross axis". Justify-content works on main; align-items on cross.
- `justify-content` — `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`. The most-confused: space-between has no edge gap; space-around has half-gap on edges; space-evenly has full gap on edges.
- `align-items` — `stretch` (default), `flex-start`, `flex-end`, `center`, `baseline`. Baseline is the secret weapon for "align text bottoms across cards" without hand-tuning padding.
- `flex-wrap` — `nowrap` (default), `wrap`. Without wrap, items shrink past their min-content. Almost always you want `flex-wrap: wrap` unless you specifically need overflow.
- `gap` — replaces the old "margin-right except for last child" pattern. Works in flex since 2021 (Safari 14.1, Chrome 84, Firefox 63).
- `flex: <grow> <shrink> <basis>` — the shorthand. `flex: 1` = `1 1 0%` (grow, shrink, start from zero); `flex: auto` = `1 1 auto` (start from content size).
When to reach for this tool
- You know what layout you want but cannot remember which flex property controls which axis.
- You inherited flex CSS that mostly works but breaks at one breakpoint and want to debug visually.
- You are learning flex and want a sandbox where changes show up immediately without context-switching.
- You are picking between flex and Grid for a specific component and want to test both options side by side.
What this tool will not do
- It will not write your responsive media queries. The generated CSS is one layout; for breakpoint-specific behavior, layer media queries or container queries on top.
- It will not solve your IE 11 problem. IE 11 supports old flexbox spec with several known bugs (height calculation in flex column, min-height ignored, gap not supported). For browsers that need IE 11 support, write defensive flex and test on the actual browser.
- It will not optimize for performance. Flex layout is fast in absolute terms but deep flex nesting can trigger expensive layout passes. For dense, animated interfaces, profile with browser devtools.
Frequently asked questions
Why is `justify-content` doing nothing on my column?
When `flex-direction: column`, the main axis is vertical — so `justify-content` controls vertical alignment, and `align-items` controls horizontal. People reach for `justify-content: center` to horizontally center a column and it works on rows but flips intuition on columns. Remember: justify is main-axis, align is cross-axis, both flip when direction changes.
What is the difference between `flex: 1` and `flex: auto`?
`flex: 1` is `1 1 0%` — items grow to share available space from a zero base, ignoring their content size. Two items with `flex: 1` always end up equal width. `flex: auto` is `1 1 auto` — items grow from their content size. Two items with `flex: auto` are wider if their content is wider. Use `flex: 1` for "equal columns", `flex: auto` for "grow but respect content".
Why does `flex-wrap` push my items to the start of each new row?
When items wrap to a second row, the cross-axis alignment changes — by default each row is auto-sized to fit content, but rows themselves can be space-distributed via `align-content`. Set `align-content: flex-start` to keep them packed at the top.
Can I use flex to make a sidebar layout?
Yes — `display: flex` on the container, `flex: 0 0 250px` on the sidebar, `flex: 1` on the main content. Sidebar stays 250px, content takes the rest. For more complex page layouts (header + sidebar + main + footer), Grid is usually cleaner.
How do I align flex items by their text baseline?
`align-items: baseline` on the container. Useful for inputs and labels of different sizes — labels align to the input's baseline regardless of input height. Also useful for cards with mixed-size titles.
Why does my flex container have a horizontal scrollbar?
A flex child has min-content larger than its calculated flex basis, and `flex-shrink` cannot shrink it further. Common cause: long URLs or unbroken strings. Fix with `min-width: 0` on the offending child to override the default `min-width: auto`.
Related tools
Visual CSS Grid layout builder. Define rows, columns, gaps with live preview. Generate grid-template code. Free online CSS Grid playground and code generator
Visual border-radius generator for CSS. Create rounded corners, pills, organic shapes. Generate CSS border-radius code with live preview
Create CSS box shadows visually with multiple layers. Adjust blur, spread, offset, color. Free online box-shadow CSS code generator
Create beautiful linear, radial, conic CSS gradients visually. Copy CSS code instantly. Free online gradient maker with multiple color stops
Build CSS keyframe animations visually with timeline editor. Create custom @keyframes. Free online CSS animation generator with live preview
Preview and compare Google Fonts with custom text. Find font pairings for web design. Free online font tester and typography playground
Last updated · E-Utils editorial team