Learn and generate flexbox by watching it: direction, justify-content, align-items, wrap and gap with live items — plus the flex:1 per-item pattern — copied as CSS.
Settings
Generated locally in your browser — your settings and results never leave this page.
The five container properties, live
Flexbox is five container decisions — direction, justify-content, align-items, wrap, gap — and this playground shows all of them acting on real items as you change them. The optional sixth piece is per-item: the included flex:1 example demonstrates the item-absorbs-remaining-space pattern behind every sidebar-plus-content layout.
Worked example
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}
/* item 2 takes the remaining space */
.flex-container > :nth-child(2) { flex: 1; }The axis swap, finally intuitive
- justify-content works along the main axis — which flex-direction defines. Switch the direction control to column and watch “justify” become vertical: thirty seconds of playing beats every diagram.
Patterns in the presets
- Header bar (space-between + center), perfect centering (both centers — the two-line answer to CSS’s oldest question), sidebar + flexible content (flex:1).
Honest guidance
- space-between distributes per line — wrapped last lines spread oddly; use gap + flex-start, or switch to grid when items must align across rows.
How to use the CSS Flexbox Generator
- Set direction, justify-content, align-items, wrap and gap.
- Watch the numbered items move in the dashed container.
- Optionally include the flex:1 item example, then copy the CSS.
Frequently asked questions
What does flex: 1 on an item do?
Shorthand for grow 1, shrink 1, basis 0% — the item absorbs all free space. Sidebar-plus-content is exactly one fixed item and one flex:1 item; the preset shows it live.
Why is my last row of wrapped items not spreading out?
space-between distributes per line, and a final line with fewer items spreads oddly. Fixes: gap with flex-start, or grid when you want strict columns.
When is flexbox the wrong tool?
Two-dimensional alignment — when items must line up across rows, that is grid's job. Flexbox excels at one line of self-sizing items: toolbars, nav, tag lists.
