Flexbox Generator
Generate flexbox CSS for a container: direction, main-axis and cross-axis alignment, wrapping and gap. The preview is a row of sample items that reacts to every setting, so you can see how the layout behaves before you copy the rule.
The output covers the container properties from the CSS Flexible Box Layout specification. Item-level properties such as flex-grow are left out on purpose; they belong on the children.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}How to use it
- Pick flex-direction. Row lays items out horizontally, column vertically.
- Set justify-content (main axis) and align-items (cross axis) from the dropdowns.
- Turn on wrap for items that should flow onto new lines, and set the gap in pixels.
- Choose how many sample items to preview, then copy the .container rule.
About the CSS behind it
A flex container is created with display: flex. Its direction is set by flex-direction, and justify-content and align-items position the items. These properties are defined in the W3C CSS Flexible Box Layout Module Level 1.
The main axis follows the direction: for row it is horizontal, for column it is vertical. That is why a centred column layout uses justify-content: center to centre vertically. flex-wrap: wrap lets items move to a new line instead of shrinking, and gap defines the space between items in both directions.
Flexbox is one-dimensional. Use it for toolbars, navigation bars, button groups and card rows. For two-dimensional layouts, use the CSS Grid Generator instead.
Frequently asked questions
- What is the difference between justify-content and align-items?
- justify-content distributes items along the main axis, which is horizontal for flex-direction: row and vertical for column. align-items positions items along the cross axis. Changing flex-direction swaps which property does which job.
- When should I use gap instead of margins?
- Use gap on the flex container. It adds space only between items, so the first and last items do not get stray outer margins, and it works with wrapped rows. Older Safari versions did not support gap in flexbox, so check your target browsers.
- Why does my flex item not shrink or grow?
- flex-grow, flex-shrink and flex-basis are set on the items, not the container. This generator styles the container only. Set flex: 1 on an item to make it take the remaining space.
- Is the generated CSS compatible with Tailwind?
- Yes, the same values map to Tailwind utilities: flex, flex-row, justify-between, items-center, flex-wrap and gap-4 for a 16px gap. Use the CSS to Tailwind converter if you want the classes generated from this CSS.