Flexbox Generator
Flexbox Generator - a browser-based developer tools utility.
Browser tool
About Flexbox Generator
Flexbox has about six properties that matter and they interact in ways that are far easier to see than to reason about. Changing one against a live row of boxes teaches it in a couple of minutes. Free, needs no account, and runs entirely online. Nothing about your layout leaves the browser.
How to use it
- Choose a directionRow or column. This decides which axis every other property refers to, which is the source of most confusion.
- Distribute along the main axisjustify-content spreads items in the direction flex-direction set.
- Align across the cross axisalign-items handles the perpendicular direction — vertical in a row, horizontal in a column.
- Copy the rulesThe container properties that produce the arrangement you built.
Main axis and cross axis
Every flex property refers to one of two axes, and which is which depends entirely on flex-direction. In a row the main axis runs horizontally, so justify-content moves things left and right; switch to column and the same property now moves them up and down. Almost every "why is this not centring" moment is a property applied to the axis the author was not thinking about.
What it does not do
- Flexbox is one-dimensional. Aligning items into both rows and columns at once is what grid is for, and forcing flex to do it produces brittle layouts.
- flex-wrap changes behaviour substantially, and align-content only applies once content has wrapped onto multiple lines.
Questions people ask
- How do I centre something both ways?
- justify-content: center with align-items: center on the flex container. That centres on both axes regardless of direction, which is why it became the standard answer to a question CSS made awkward for twenty years.
- Why is align-content doing nothing?
- Because it only affects multiple lines, and without flex-wrap there is only ever one. Either enable wrapping or use align-items, which is the single-line equivalent.
Questions about ToolsVerse itself — privacy, cost, what happens to your files — are answered in the frequently asked questions.
Related tools
The tools people most often need alongside Flexbox Generator.
Can’t find the tool you need?
Tell us what you’re looking for and we’ll consider adding it.