Visual flexbox generator
Design the layout with controls, see the result instantly and copy the CSS or Tailwind classes.
Container
Item 2 of 3
- The main axis is horizontal; the cross axis is vertical.
- Free space goes between items; the first and last touch the edges.
- On the cross axis they are centered.
- Everything stays on one line: if it does not fit, items shrink according to flex-shrink.
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.item-2 {
flex: 1 1 auto;
}
Notes
- Only properties that differ from their defaults are generated.
- flex is always written with its three values (grow shrink basis) to avoid the flex: 1 trap, which sets flex-basis to 0%.
- Tailwind classes target version 4 and have been checked to be equivalent to the generated CSS.
- order only changes visual order: screen readers and keyboard follow HTML order.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Flexbox solves almost every one-dimensional layout, but it is hard to remember which axis justify-content controls, why an item will not shrink or what flex: 1 really does. This generator lets you try it hands-on: change a property and instantly see how items move, with the axes marked and an explanation of each value. You can resize the container to see when items wrap, edit each item separately and start from common templates. The result exports as clean CSS or Tailwind classes.
Features
- ✓Every container property: flex-direction, flex-wrap, justify-content, align-items, align-content and gap
- ✓Per-item properties: flex-grow, flex-shrink, flex-basis, align-self and order
- ✓Live preview with adjustable width and height to see how items share space and wrap
- ✓Plain-language explanation of the axes and what each value does
- ✓Ready templates: centering, navbar, cards, sidebar, sticky footer and media object
- ✓Exports CSS with your class names, the HTML and a Tailwind v4 class version
- ✓Only emits what differs from defaults and writes flex with its three values
- ✓CSS and Tailwind equivalence checked across thousands of combinations
How do I build a flexbox layout?
- 1
Pick a template or start from scratch
Use a template such as navbar or cards, or tune the container properties.
- 2
Tune each item
Click an item in the preview and change its grow, shrink, basis, alignment or order.
- 3
Try sizes
Change the container width and height to check how the layout responds.
- 4
Copy the code
Choose CSS, HTML or Tailwind, set your class names and copy.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis, horizontal with flex-direction: row and vertical with column. align-items aligns them on the cross axis, perpendicular to the main one.
What does flex: 1 mean?
It is short for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. That is why several items with flex: 1 are equally wide even with different content. If you want them to grow from their natural size, use flex: 1 1 auto.
Why won't my item shrink?
It may have flex-shrink: 0 or content that cannot break, such as a long word or an image. Flex items have min-width: auto by default; adding min-width: 0 lets them shrink below their content.
When should I use flexbox and when CSS Grid?
Flexbox is ideal for distributing items in one direction: bars, buttons or wrapping lists. Grid is better when you need to control rows and columns at once, such as a page's overall layout.
Is the Tailwind code equivalent to the CSS?
Yes. Tailwind v4 classes are used, with arbitrary values when there is no equivalent class, and equivalence has been verified property by property across thousands of combinations.
Related tools
Embed Flexbox Generator on your site
Add Flexbox Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/flexbox-generator"
width="100%"
height="700"
frameborder="0"
title="Flexbox Generator — miguelacm.es"
></iframe>