How to use it
- Type a Class name for the container, such as toolbar. The CSS uses it as a class selector.
- Choose flex-direction, flex-wrap and the alignment values. Each one shows its initial value first.
- Set Number of items (1 to 12), then the flex-grow, flex-shrink and flex-basis of each item.
- Check the Preview, then copy the CSS into your stylesheet and put the class on the container.
The container properties
The CSS Flexible Box Layout Module lays out the children of a flex container along a main axis. flex-direction chooses the axis, and flex-wrap chooses whether the children may move onto a new line. justify-content spreads the children along the main axis, and align-items and align-content place them across it.
- flex-direction starts as row, and takes row, row-reverse, column or column-reverse.
- flex-wrap starts as nowrap, and takes wrap or wrap-reverse as well.
- justify-content starts as flex-start, and align-items and align-content start as stretch.
The item properties
Each child of the container is an item, and its three flex properties decide how much room it gets. flex-grow starts as 0 and takes the spare room in proportion to the factor. flex-shrink starts as 1 and says how much an item gives up when there is too little room. flex-basis starts as auto, which uses the size the item has, and a length or a percentage sets a size first.
flex: flex-grow flex-shrink flex-basis; the initial value is 0 1 autoWhat the tool does not write
- The order, align-self and gap properties, which you can add to the container or an item by hand.
- Items beyond the twelfth: the tool stops at 12 items, so a longer list needs its rules written by hand.
Worked example: a toolbar that wraps, with three items
The class name is toolbar, flex-wrap is wrap, justify-content is space-between and align-items is center. The first item keeps the initial values, so it has no rule. The second grows to fill the spare room, with a basis of 0. The third keeps its size, with a basis of 200px. The tool writes a rule for the second and third items only.
| Item | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Frequently asked questions
What is the difference between flex-grow and flex-basis?
flex-basis is the size an item starts from before the free space is shared out. flex-grow then decides how the spare room is shared, in proportion to each item's factor. An item with a basis of 0 and a grow of 1 takes the space that the others leave.
Why does the first item in the example have no rule?
Its values are the initial values of the properties: flex-grow 0, flex-shrink 1 and flex-basis auto. The browser uses those values without a rule, so the tool writes a rule only for an item that differs from them.
Why does align-items start as stretch?
The CSS Flexible Box Layout Module gives align-items the initial value stretch, so the items fill the cross axis unless you choose another value. The tool starts from the same value, so the CSS matches what a browser does with no declaration.
Why does the basis accept only px, rem, em and percent?
Those are the units the tool checks. A basis of auto or the unitless 0 is accepted as well. Other units, such as vw, are not offered here, so write them by hand if your layout needs them.
Can I add a gap between the items?
Not with this tool, which writes the five container properties and the item flex values only. Add a gap to the container rule by hand, after you have copied the CSS.
Is the CSS I make sent anywhere?
No. The preview and the CSS are made in your browser. Nothing is stored or sent to our server, so copy the CSS before you leave the page.
Sources
Figures and text last checked on Thursday, November 12, 2026.