📏 CSS Flexbox Generator
Set flex-direction, justify-content, align-items, wrap and gap and watch items rearrange live. Copy the container CSS when it looks right.
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;How the css flexbox generator works
Flexbox lays out items along a main axis and a cross axis. This generator exposes the container properties that do the work: flex-direction (which axis is the main one), justify-content (spacing along the main axis), align-items (alignment on the cross axis), flex-wrap (whether items wrap to new lines), and gap (space between items). Changing any control rearranges a set of sample items in the live preview and rewrites the CSS, so you can learn flexbox by watching rather than memorising. The generated code is standard CSS produced in your browser.
The single most common confusion in flexbox is that justify-content and align-items swap axes when you change flex-direction: with row, justify-content is horizontal; with column, it becomes vertical. The live preview makes this obvious. For per-item control (flex-grow, order) you add properties to the children, which you can do after copying the container CSS.
Frequently asked questions
How do I centre something with flexbox?
On the container, set display: flex, justify-content: center and align-items: center. That centres the child on both axes. The generator produces exactly this when you pick centre for both.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis; align-items positions them along the cross axis. Which direction each one controls depends on flex-direction, so they swap when you switch between row and column.
When should I use flexbox vs grid?
Flexbox is best for one-dimensional layouts (a row or a column of items), like navbars and toolbars. CSS Grid is best for two-dimensional layouts (rows and columns together), like page or card grids. Use the one that matches your layout.
What does flex-wrap do?
By default flex items stay on one line and shrink to fit (nowrap). flex-wrap: wrap lets them flow onto new lines when they run out of room, which is how responsive item grids are built with flexbox.
Is the CSS generated locally?
Yes. Everything runs in your browser; nothing is uploaded.