Flexbox playground
Toggle flex properties and copy the resulting CSS.
FreeRuns in your browserNo signupUpdated 2026-10-29
align-content only has an effect when items wrap onto more than one line.
Preview
.container {
display: flex;
gap: 16px;
}flex gap-[16px]
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This flexbox generator is a playground for the flex container properties. Change direction, wrapping, justify-content, align-items, align-content and gap from the dropdowns and watch up to twelve numbered boxes rearrange. The boxes have uneven heights, so alignment changes are easy to see. The CSS output includes only the properties you changed from their defaults, which keeps it short, and the same layout is given as Tailwind classes.
How to use it
- Set flex-direction to row for a horizontal line or column for a vertical stack.
- Turn on wrapping if items should flow onto a second line.
- Use justify-content to spread items along the main axis and align-items to line them up across it.
- Add a gap and change the item count to test the layout with more content.
- Copy the CSS or the Tailwind classes.
How to read the result
Set justify-content to space-between and align-items to center with a 16px gap. The CSS reads display: flex; justify-content: space-between; align-items: center; gap: 16px;, and the Tailwind version is flex justify-between items-center gap-[16px]. The first item sits against the left edge, the last against the right, and the rest share the space between. With four 100px items in a 600px row, 200px is left over, so each of the three spaces is about 67px. The gap is a minimum, not an addition.
Center on align-items lines the items up through their middles, which is why a logo and a row of links of different heights look tidy in a header.
Switch direction to column and the axes swap. justify-content now works vertically and align-items horizontally, which catches people out more than anything else in flexbox.
align-content only does something when wrapping is on and items fill more than one line. On a single line there is nothing for it to distribute.
For two-dimensional layouts, use the CSS grid generator. For help with a full build, see website design and development.
Questions
Frequently asked.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis, the direction the flex container runs. align-items positions them on the cross axis, at right angles to it. In a row, justify is horizontal and align is vertical. Change flex-direction to column and the two swap over.
Why is my flex item not shrinking?
Flex items have min-width: auto by default, so they refuse to shrink below the width of their content, such as a long URL or a wide image. Set min-width: 0 on the item, or overflow: hidden, and it will shrink to fit the container as expected.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide