Flexbox Generator
Design CSS flexbox layouts visually. Adjust all flex container and item properties with live preview and copy the ready-to-use CSS code. Free, browser-based.
What Is CSS Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to align and distribute space among items in a container — even when their sizes are unknown or dynamic. Before Flexbox, centering elements and building responsive rows required fragile float hacks or table tricks. Flexbox solves alignment in one or two lines of CSS. It is a one-dimensional layout model — it handles either a row or a column at a time — which makes it ideal for navigation bars, button groups, card rows, sidebars and any layout where items need to share available space dynamically.
Container vs Item Properties
| Property | Applied to | Controls |
|---|---|---|
display: flex | Container | Activates the flex context on children |
flex-direction | Container | Main axis: row (horizontal) or column (vertical) |
justify-content | Container | Alignment along the main axis |
align-items | Container | Alignment along the cross axis |
flex-wrap | Container | Whether items wrap to a new line |
gap | Container | Space between flex items |
flex-grow | Item | How much the item expands to fill space |
flex-shrink | Item | How much the item contracts when space is tight |
flex-basis | Item | Default size before growing or shrinking |
align-self | Item | Overrides align-items for this item only |
The flex Shorthand
flex: grow shrink basis — for example flex: 1 1 auto. The most common values:
flex: 1— item grows to fill all available space equally with its siblingsflex: none— item keeps its natural size, does not grow or shrinkflex: 0 0 200px— fixed 200px wide, no growing or shrinking
Centering With Flexbox
The most common Flexbox use case is perfect centering — both horizontally and vertically in two lines:
.container {
display: flex;
justify-content: center;
align-items: center;
}