◈Free
Flexbox layout generator
Generate flex alignment, wrapping and gap properties.
Generate flex alignment, wrapping and gap properties. Choose row or column flow, main-axis alignment, cross-axis alignment and gap for a flex container. The generated declarations always enable wrapping.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
Direction: row Main axis: center Cross axis: center Gap px: 16
Example result
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px;
Limitations and details
Only the listed alignment options are supported; child flex-basis, growth, shrinking and ordering are not generated.
Inputs and options
- Direction
- Row / Column
- Main axis
- Start / Center / Space between
- Cross axis
- Stretch / Center / Start
- Gap px
- Number · Minimum: 0 · Maximum: 200
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.