CSS Flexbox Generator
Visually build Flexbox layouts — direction, alignment, wrapping, gap, per-item controls — real-time preview
Presets
Container Properties
Live Preview
Click an item in the preview to select it for editing.
Flex Items (3/12)
Item 1 Properties
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}You need to center a login form both horizontally and vertically, but you can never remember whether it’s justify-content: center or align-items: center that handles the vertical axis — and it depends on flex-direction. Instead of trial-and-error in DevTools, this generator lets you toggle every flexbox property visually and see the result instantly.
Why This Tool
CSS Flexbox has 13 container and item properties. The axis behavior flips when you switch between row and column direction, which makes the mental model tricky. This tool gives you a live visual canvas: change any property and immediately see how items reflow. The generated CSS updates in real time. Everything runs locally in your browser.
What Is CSS Flexbox?
CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model that distributes space among items in a container along a single axis — either horizontally (row) or vertically (column). Unlike Grid (which is two-dimensional), Flexbox excels at distributing items along one direction.
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}Container Properties
flex-direction
Sets the main axis: row (left to right), row-reverse, column (top to bottom), column-reverse. This determines which direction justify-content distributes items.
justify-content
Distributes items along the main axis:
| Value | Effect |
|---|---|
flex-start | Items packed to the start |
flex-end | Items packed to the end |
center | Items centered |
space-between | Equal space between items, none at edges |
space-around | Equal space around each item |
space-evenly | Equal space between and at edges |
align-items
Aligns items along the cross axis:
| Value | Effect |
|---|---|
stretch (default) | Items fill the cross axis |
flex-start | Items align to cross-start |
flex-end | Items align to cross-end |
center | Items centered on cross axis |
baseline | Items align by text baseline |
flex-wrap
Controls whether items wrap to new lines: nowrap (default — items shrink to fit), wrap (items flow to next line), wrap-reverse.
gap
Sets spacing between items without margins. Works in both directions.
Item Properties
flex-grow: How much an item grows relative to siblings (0 = don’t grow)flex-shrink: How much an item shrinks when space is tight (1 = shrink equally)flex-basis: Initial size before growing/shrinking (auto,0, or a length)align-self: Overridealign-itemsfor one itemorder: Change visual order without changing HTML order
Common Flexbox Patterns
Center anything:
.center { display: flex; justify-content: center; align-items: center; }Navigation bar:
.nav { display: flex; justify-content: space-between; align-items: center; }Equal-width columns:
.cols { display: flex; gap: 16px; }
.cols > * { flex: 1; }Frequently Asked Questions
What is the difference between Flexbox and CSS Grid? Flexbox is one-dimensional — it handles layout in a row OR a column. CSS Grid is two-dimensional — it handles rows AND columns simultaneously. Use Flexbox for navbars, button groups, and centering. Use Grid for page layouts and card grids.
Why do my flex items shrink instead of wrapping?
The default flex-wrap value is nowrap, so items shrink to fit the container. Add flex-wrap: wrap to allow items to flow to the next line when they run out of space.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It makes the item grow to fill available space equally with other flex: 1 siblings.
How do I push one item to the right in a flex row?
Use margin-left: auto on the item you want pushed right. Auto margins in flexbox absorb all available space in that direction.
Does this tool send my data anywhere? No. All layout computation and CSS generation happens entirely in your browser. Nothing is transmitted to any server.