Click a box to edit its flex-grow, flex-shrink, flex-basis, order and align-self.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}The preview boxes have demo widths and heights that stand in for real content. The code only contains flex properties.
Container
How to use
Set up the container
Pick a layout button or set display, flex-direction, flex-wrap, justify-content, align-items and align-content from the dropdowns. Drag the gap slider, or switch on separate row and column gaps, and set Item count from 1 to 20.
Click a box to edit it
Clicking a box in the preview, or choosing it in Selected item, opens its controls: flex-grow, flex-shrink, flex-basis, order, align-self and a label. Reset item puts it back to the defaults.
Copy the code
Switch between the CSS, HTML, CSS + HTML and Tailwind tabs under the preview, then copy or download. Copy share link saves the container and every item in a URL.
Why CSS Flexbox Generator
- Container and per-item flex properties in one place, including align-content and inline-flex.
- Nine one-click layouts, from center a div to wrapping tags and pricing columns.
- Notes appear when a property has no effect, such as align-content on a single line.
- CSS, HTML and Tailwind output that only includes the item rules you changed.
Flexbox property cheat sheet: container vs item
Flexbox properties split into two groups. Container properties go on the parent and affect all children. Item properties go on a child and only change that child. Mixing them up is the most common reason a flex rule seems to do nothing.
| Property | Goes on | What it does | Default |
|---|---|---|---|
| display: flex / inline-flex | Container | Turns direct children into flex items | n/a |
| flex-direction | Container | Sets the main axis: row or column, normal or reversed | row |
| flex-wrap | Container | Lets items move to new lines instead of shrinking | nowrap |
| justify-content | Container | Spaces items along the main axis | flex-start |
| align-items | Container | Aligns items on the cross axis within a line | stretch |
| align-content | Container | Spaces lines on the cross axis when wrapping | normal |
| gap | Container | Space between items, not at the outer edges | 0 |
| flex-grow | Item | Share of free space the item takes | 0 |
| flex-shrink | Item | How much the item gives up when space runs out | 1 |
| flex-basis | Item | Starting size on the main axis | auto |
| order | Item | Visual position among siblings | 0 |
| align-self | Item | Overrides align-items for one item | auto |
Common flexbox layout recipes
Each of these matches one of the layout buttons above the preview. Load it, then click the items to see which item rules make it work.
- Center a div: .container { display: flex; justify-content: center; align-items: center; }
- Navbar: .container { display: flex; justify-content: space-between; align-items: center; } with logo, links and a button as children.
- Equal cards: .container { display: flex; flex-wrap: wrap; gap: 16px; } and each card gets flex: 1 1 180px so cards share a row and wrap when narrow.
- Sticky footer: .container { display: flex; flex-direction: column; min-height: 100vh; } and the main area gets flex: 1 1 auto so it pushes the footer down.
- Sidebar and content: the sidebar gets flex: 0 0 160px so it never shrinks, and the content gets flex: 1 1 0 to fill the rest.
- Push the last item right: give a spacer item flex-grow: 1, or put margin-left: auto on the last item.
How flex-grow splits free space: a worked example
Take a 600px wide row with no gap and two items, both with flex-basis: 200px. The items start at 200px each, which leaves 200px of free space.
Give item A flex-grow: 1 and item B flex-grow: 2. The free space is split into three shares. A gets one share, about 66.7px, and ends up about 266.7px wide. B gets two shares, about 133.3px, and ends up about 333.3px wide.
flex-shrink works the other way. If the items would overflow, each one gives up space in proportion to its shrink value multiplied by its basis. An item with flex-shrink: 0 keeps its basis and lets its siblings shrink instead, which is how the sidebar layout keeps a fixed width.
A common shortcut is flex: 1, which means flex: 1 1 0%. Because the basis is 0, all free space is shared by grow values alone, so items with flex: 1 end up equal width no matter how much text they hold.