CSS Flexbox Generator
Build CSS Flexbox layouts visually. Configure the container and each item, watch the live preview update instantly, then copy the ready-to-use CSS. No signup, runs entirely in your browser.
Container
Items
Preview
CSS Output
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}
.item-1 {
flex: 0 1 auto;
}
.item-2 {
flex: 0 1 auto;
}
.item-3 {
flex: 0 1 auto;
}How to Use the CSS Flexbox Generator
- 1Set container properties — flex-direction, justify-content, align-items, wrap, and gap.
- 2Configure each item with flex-grow, flex-shrink, and flex-basis.
- 3Watch the live preview update as you change values.
- 4Copy the generated CSS straight into your stylesheet.
Worked Example: How flex-grow Distributes Leftover Space
Say a flex container is 600px wide and holds three items, each with flex-basis: 100px. The items consume 300px, leaving 300px of free space. Now set their flex-grow values to 1, 2, and 3 — a total of 6 grow units. Each item gets its basis plus a share of the leftover proportional to its grow value: item 1 = 100 + (1/6 × 300) = 150px, item 2 = 100 + (2/6 × 300) = 200px, item 3 = 100 + (3/6 × 300) = 250px. They sum back to 600px exactly.
This is why the common “equal columns” recipe is flex: 1 on every item — that's shorthand for grow 1, shrink 1, basis 0. With a basis of 0, there is no starting width to reserve, so the entire container width is split by the grow ratios; three items at grow 1 each take exactly one third. Change one to grow 2 and it takes half again as much as the others. Set the values in the generator and watch the preview widths match this arithmetic — it turns the abstract grow/shrink/basis triple into something you can see.
Flexbox Tips
Equal-width columns
Set flex: 1 on every item (grow 1, shrink 1, basis 0). All items share space equally regardless of content length.
Use gap, not margins
The gap property adds consistent spacing between items without affecting the outer edges of the container — cleaner than adding margins to each item.
Centring anything
Set justify-content: center and align-items: center on the container to perfectly centre a single child both horizontally and vertically.
Prevent shrinking
Set flex-shrink: 0 on items like icons or avatars that should never compress below their natural size.
Responsive wrapping
Combine flex-wrap: wrap with a flex-basis (e.g. 200px) to create a grid that collapses to fewer columns on smaller screens without media queries.
Override with align-self
Use align-self on a single item to override the container's align-items — useful when one item needs different vertical alignment from the rest.
Frequently Asked Questions
What is CSS Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model that arranges items along a single axis — either a row or a column. It makes it easy to distribute space, align items, and build responsive layouts without floats or manual positioning.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the direction set by flex-direction). align-items controls alignment along the cross axis (perpendicular to the main axis). For a row layout, justify-content aligns items left/right and align-items aligns them top/bottom.
When should I use flex-grow vs flex-basis?
flex-basis sets the initial size of an item before remaining space is distributed. flex-grow controls how much of the remaining space an item claims relative to other items. Set flex-basis: 0 and flex-grow: 1 on all items to make them equal-width regardless of content.
What does flex-wrap do?
By default (nowrap) flex items stay on one line and may overflow the container. Setting flex-wrap: wrap allows items to wrap onto new lines when there is not enough space, making it useful for responsive grids.
What is align-content and when does it apply?
align-content controls how multiple lines of flex items are distributed along the cross axis. It only has an effect when flex-wrap is set to wrap or wrap-reverse and there is more than one line of items.
How is Flexbox different from CSS Grid?
Flexbox is one-dimensional — it lays items out along a single row or column. CSS Grid is two-dimensional and controls both rows and columns simultaneously. Use Flexbox for navigation bars, button groups, and single-axis alignment; use Grid for full-page layouts and two-dimensional placement.
Is my data stored or sent to a server?
No. The generator runs entirely in your browser. Nothing is sent to any server.