CSS Flexbox Generator Formatter🔒 100% local
Build flexbox layouts visually. Privacy-first, no server uploads, no tracking.
Reads five comma-separated values - direction, justify-content, align-items, flex-wrap, gap - and prints a .container rule for them, a plain-English line for each property, the main and cross axis for your direction, four recipes and the min-width gotcha. Where CSS is wordy it accepts the short form: between, around and evenly map to the space-* values, and start and end map to flex-start and flex-end. Every value you give is checked against a table, and an unknown one stops the run with an error.
How to use it
- Type direction, justify, align - for example row, center, center - and press Process.
- Add a fourth value for flex-wrap and a fifth for gap if you need them, for example column, between, center, wrap, 16px.
- Read the CSS block, then the What each line does list and the axis notes for your direction.
- Copy Output takes the rule plus the explanations.
Worked example
row, center, centerbecomes.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}The default example in the box. The run also prints per-property explanations and four recipes below this block.
column, between, center, wrap, 16pxbecomes.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: 16px;
}'between' is expanded to space-between, and wrapping adds an align-content line derived from your align value - center here, stretch when you asked for stretch, flex-start otherwise.
When to use it
- Getting the container rule for a layout you can already describe in words, such as a column with space between the ends.
- Checking which way justify-content and align-items point for a column container before debugging a layout.
- Producing a rule to hand-edit when you want the short aliases expanded into valid CSS.
What it does not do
- Only the first three values are validated. The fourth is taken as flex-wrap with no check and the fifth becomes gap verbatim, so 'row, center, center, banana, xyz' silently emits gap: xyz and drops the bogus wrap.
- flex-wrap is only emitted for wrap and wrap-reverse. Writing nowrap explicitly produces the same output as omitting it.
- There are no item settings here. Child sizing is explained in the notes but only the container rule is generated - for flex-grow, flex-basis and align-self use css-flexbox-playground.
- Missing values default silently instead of erroring: 'row, center' produces align-items: stretch with no hint that a value was absent.