How to use the css flexbox generator
- Set the container options: direction, wrap, justify-content, align-items, align-content and the gap between items.
- Choose how many items to show, from 1 to 12, and pick one in One item to change its grow, shrink, basis, order and align-self.
- Watch the preview change as you edit. The preview items have different heights so you can see alignment.
- Press Copy CSS to copy the container rule and a rule for each item you changed.
What the container options do
Flexbox lays items out along a main axis. The direction picks the main axis, row for left to right and column for top to bottom. Justify-content spreads the items along the main axis, and align-items positions them on the cross axis. Wrap decides if items can move to another line when they run out of room, and align-content spaces those lines. Gap sets the space between items without adding margins.
What the item options do
Each item can grow to take extra room, shrink when there is too little, and start from a basis size before the free space is shared. Order changes where an item appears without changing the page structure, and align-self lets one item break from the group on the cross axis.
- flex-grow: how much of the free space the item takes compared with others, 0 means none.
- flex-shrink: how much the item gives up when space is short, 1 is the default.
- flex-basis: the starting size, such as auto, 200px or 30%.
- order: a number that sorts items, lower first.
Using the code
The container rule uses the class name .container and the item rules use .item-1, .item-2 and so on, so rename them to match your markup. By default only values that differ from the browser default are written, which keeps the code short, and you can tick the box to include everything. For a gradient background see the CSS gradient generator, and to keep a shape in proportion use the aspect ratio calculator.
Assumptions and limits
- The preview shows the items with fixed heights in row layouts, so heights are not in the output CSS.
- Flex-basis accepts auto, a plain number of pixels, or a number with px, %, em, rem, vw or vh.
- Gap is in pixels from 0 to 200.
- Everything runs in your browser and no settings are uploaded.
Frequently asked questions
What is the difference between justify-content and align-items?
Justify-content places items along the main axis, which is horizontal for a row. Align-items places them across it, which is vertical for a row. Switching the direction to column swaps the two.
What does flex: 1 mean?
It is a shorthand for flex-grow 1, flex-shrink 1 and flex-basis 0. The item grows to share the free space equally with other items that have the same value.
Why is align-content not doing anything?
It only has an effect when items wrap onto more than one line. Set flex-wrap to wrap and make the container tall enough to see the lines move.
Should I use gap or margins?
Gap is simpler because it spaces only between items, not at the edges. It is supported by current browsers for flexbox.