CSS Flexbox Generator: The Properties and What They Actually Do
Flexbox is small enough to learn in an afternoon and confusing enough to trip people up for years, mostly because every property is described relative to an axis that one other property controls. This generator lets you set every container and item property against a live preview, edit each item on its own, and see the CSS and Tailwind that result. It also flags the properties that are set but cannot possibly do anything, which is the category most flexbox questions actually fall into. Everything runs in your browser.
Table of Contents
The Two Axes, Which Explain Everything
flex-direction sets the main axis. Row means horizontal, column means vertical, and the cross axis is always the other one. Every other property is defined in terms of these two rather than in terms of left and up.
justify-content works on the main axis. So it centres horizontally in a row and vertically in a column. Nothing swapped when you changed direction: the axis moved and the property followed it.
align-items works on the cross axis. The mirror image of the above, and the two together are how you centre something in both directions with two lines.
Learn this once and flexbox stops being confusing. Almost every moment of surprise with flex layouts comes from thinking in screen directions rather than in axes.
How to Use This Generator
Change one property and watch the preview. The boxes are real elements with real CSS, so the preview is the behaviour rather than an illustration of it.
Click an item to edit it. The container properties get all the attention, and most real layout problems are solved with grow, shrink and basis on individual items.
Read the warnings. They fire when a property you have set cannot have an effect given the rest of the configuration, which is a class of problem browsers never report.
Take the CSS or the Tailwind. The Tailwind output covers the container, since per item classes depend on how your markup is organised.
Container Properties
flex-wrap defaults to nowrap. Which means items shrink rather than moving to a new line, and it is the reason a row of cards squashes instead of wrapping when you did not ask it to.
justify-content needs free space. If the items already fill the container there is nothing left to distribute, so the property is set and visibly inert.
align-items defaults to stretch. This is why flex children so often end up the same height without anyone asking, and it is usually helpful.
align-content only applies to multiple lines. With nowrap there is exactly one line, so it can never do anything. It is the single most common source of confusion in this list.
Item Properties
flex-grow shares out leftover space. It is a ratio, not a size. An item with grow of two takes twice the share of the leftover space as one with grow of one, which is not the same as being twice as wide.
flex-shrink defaults to one. Everything gives up space when there is not enough. Setting it to zero makes an item rigid, which is right for an icon and wrong for almost everything else.
flex-basis is the starting size. It takes effect before growing and shrinking, and along the main axis it takes precedence over width, which surprises people setting both.
align-self overrides align-items for one item. The usual case is pushing a single element to the bottom of a row where everything else is centred.
The Flex Shorthand
flex sets grow, shrink and basis at once. In that order, and using the shorthand is preferred because it resets all three rather than leaving one at whatever it inherited.
flex: 1 is the one you will write most. It expands to grow one, shrink one, basis zero, which makes items share space equally regardless of their content.
flex: auto behaves differently. Basis auto means content size is respected first and only the surplus is shared, so items with more text end up wider.
flex: none makes an item rigid. Grow zero, shrink zero, basis auto. Useful for something that must keep its natural size no matter what.
Gap, and What It Replaced
Gap spaces items without touching their margins. Before it, the standard approach was a margin on every item and a negative margin on the container to cancel the outer edge.
It applies only between items. No leading or trailing space, which is exactly what the margin approach had to work around.
Row and column gaps can differ. Useful for a wrapping layout where the vertical rhythm should be tighter or looser than the horizontal.
Support has been solid for years. Gap in flexbox arrived later than in grid, and it is now safe to use everywhere that matters.
Flexbox Against Grid
Flexbox is one dimensional. Items are laid out along a single axis, and wrapping produces additional lines rather than a second dimension you can address.
Grid is two dimensional. Rows and columns exist simultaneously and items can be placed into specific cells, which flexbox has no concept of.
Content out against layout in. Flexbox lets content determine the sizes, while grid imposes a structure that content fits into. That is usually the deciding question.
They combine well. A grid page with flex components is an extremely common and entirely sensible arrangement.
Order and Accessibility
order changes the visual sequence only. The DOM order is unchanged, so screen readers and keyboard navigation still follow the source.
That mismatch is a real accessibility problem. Tabbing through a form that jumps around the screen because of order is disorienting for a sighted keyboard user.
row-reverse has the same issue. It reverses the visual order while leaving tab order alone, which for a set of links is genuinely confusing.
Prefer fixing the source order. Reordering is best kept for small, local adjustments where the logical sequence is not affected.
Common Mistakes to Avoid
Expecting align-content to work without wrapping. With one line there is nothing for it to space, and no warning is given anywhere.
Setting width instead of flex-basis. Along the main axis, basis wins, so a width that appears to be ignored usually is.
Forgetting min-width auto. Flex items will not shrink below their content size by default, which is why long text or a wide image can blow out a layout. min-width zero is the fix.
Reordering heavily with order. It looks harmless and it separates the visual sequence from the one keyboard users experience.
Frequently Asked Questions
An accessibility reminder: order and the reverse directions change what is seen without changing what is read or tabbed through. Keep reordering local and small, and fix the source order where the logical sequence really is different.