TTULAKITO
Designer

CSS Flexbox Generator

Tune flex-direction, justify, align, and gap with live preview.

All tools

Controls

1
2
3
4

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

Frequently asked questions

What's the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal by default), while align-items aligns them along the cross axis (vertical by default). Swap which is which by changing flex-direction.
When should I use gap instead of margin in flexbox?
gap applies space only between flex items, not before the first or after the last, so it scales cleanly when items wrap or get removed. Margin-based spacing usually needs :last-child hacks to avoid trailing gaps.
Why is my flex item not shrinking below its content size?
By default, flex items have min-width: auto, which keeps them at least as wide as their content. Set min-width: 0 (or min-height: 0 for columns) to let them shrink properly.