CSS Flexbox Generator
Container and item flexbox rules in one form with a live preview.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css flexbox generator
- In the Container section pick a flex-direction, justify-content, align-items, flex-wrap and gap.
- Set the item count (1–24) to see how children of different counts fit your layout.
- In the Item shorthand section set flex-grow, flex-shrink, and flex-basis to control how each item resizes.
- Watch the live preview update as you change each control.
- Press Generate CSS, then Copy CSS to grab the container rule plus the `.flex-item` shorthand.
About this css flexbox generator
The CSS Flexbox generator outputs the two CSS rules you actually need: one for the container and one for the items. The container controls layout direction (`flex-direction`), distribution along the main axis (`justify-content`), alignment on the cross axis (`align-items`), wrapping behavior (`flex-wrap`), and the spacing between items (`gap`). The item rule packages the three sub-properties (`flex-grow`, `flex-shrink`, `flex-basis`) into the standard `flex` shorthand so it pastes into a stylesheet as one line. A live preview pane sits above the controls and renders as the LCP element so you see the layout before any text loads.
Worked example: pick flex-direction `row`, justify-content `space-between`, align-items `center`, flex-wrap `nowrap`, gap `1rem`, item count `4`, then set flex-grow `1`, flex-shrink `1`, flex-basis `0`. The generator emits a container with `.flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 1rem; }` and an item rule of `.flex-item { flex: 1 1 0; }` — a four-column equal-width row exactly as the preview shows. Swap direction to `column` and the same controls produce a vertical stack with the same shorthand.
FAQ
- When should I use Flexbox vs Grid?
- Flexbox is a one-dimensional layout system — best for a single row or column where items distribute along one axis. Grid is two-dimensional and is the right tool when you need to align in both rows and columns simultaneously.
- What does `flex: 1 1 0` mean?
- It is the `flex` shorthand for `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`. The result is equal-width children that fill the container, regardless of their content length — the standard recipe for an even row of cards.
- Why does justify-content do nothing in my preview?
- justify-content only spaces items along the main axis when items do not already fill it. If `flex-grow` is non-zero or your items collectively exceed the container size, there is no leftover space to distribute. Set flex-grow to 0 or shrink the items to see justify-content take effect.
- Is `gap` supported in flex containers?
- Yes — `gap` in flex containers is supported in every modern browser since 2021. Older browsers needed margin tricks; in evergreen browsers `gap` is the clean choice.
- Why does align-items: stretch make my items grow vertically?
- stretch is the default. It tells items to fill the cross-axis size of the container. To preserve item heights set align-items to `flex-start`, `center`, `flex-end`, or `baseline`.