Flexbox Generator
Click through direction, justify, align and wrap options and watch the preview change. Copy the Tailwind classes when it looks right.
flex gap-4
<div class="flex gap-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 1rem;
}Frequently asked questions
How do I center something with Tailwind flexbox?
Put flex items-center justify-center on the parent. justify-center centers along the main axis, items-center centers along the cross axis, so the child ends up in the middle.
What is the difference between justify-* and items-*?
justify-* positions items along the main axis, which is horizontal for flex-row and vertical for flex-col. items-* positions them along the other axis. Switching the direction swaps what each one does visually.
Why does this tool leave out some classes?
Defaults are omitted to keep the output short: flex-row, flex-nowrap, justify-start and items-stretch are already what you get from a bare flex.
When should I use grid instead of flexbox?
Use flexbox for one-dimensional layouts such as a navbar or a row of buttons. Use grid when you need to control rows and columns together, like card galleries or dashboards.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.