CSS Flexbox Generator
Build Flexbox layouts by clicking rather than guessing. Set every container property — direction, wrap, justify, align — and tune order, grow, shrink, basis and align-self on each item, with a live preview as you go. Six ready-made layouts included, and the output gives you CSS, HTML, or a standalone page. Everything runs in your browser. Free, no signup.
How to Use This Tool
- Set the container properties — choose flex-direction, wrap, justify-content and align-items. The preview updates on every click.
- Add and tune items — press Edit on any item to set its order, flex-grow, flex-shrink, flex-basis and align-self override.
- Or start from a preset — navbar, card grid, sidebar, centered hero, equal columns and sticky footer are all one click away.
- Copy the code — switch between CSS, HTML and a full standalone page, then copy it or download a ready-to-open .html file.
About CSS Flexbox
Flexbox is a one-dimensional layout system, and internalising that single fact clears up most of the confusion around it. Everything you set is relative to a main axis, chosen by flex-direction, and a cross axis perpendicular to it. With the default row direction, the main axis runs horizontally, so justify-content spaces items left to right and align-items positions them vertically. Switch to column and those two swap roles entirely. Almost every "why is justify-content not doing anything" question comes down to the direction having changed without the mental model changing with it.
The flex shorthand is where most of the real power sits, and its three parts are worth separating. flex-grow decides how leftover free space is distributed: a value of 0 means never take extra space, while a value of 1 on every item makes them share it equally, and a value of 2 on one item gives it twice the share of the others. flex-shrink decides what happens when there is not enough room, defaulting to 1 so items shrink proportionally; setting it to 0 pins an item at its size and forces the others to give way. flex-basis is the size an item starts from before any growing or shrinking happens.
The distinction between flex-basis and width trips up nearly everyone at first. In a row, flex-basis behaves like width, but it takes priority over it and applies along the main axis specifically, so in a column layout flex-basis controls height instead. The practical consequence is that flex-basis is direction-aware while width is not, which is why a component that flips from row to column at a breakpoint works correctly with flex-basis and breaks with width. The common shorthand flex: 1 expands to grow 1, shrink 1, basis 0, which makes items size purely by available space and ignore their content width entirely.
Choosing between Flexbox and Grid is less contentious than the internet suggests, because they answer different questions. Flexbox distributes space along a single axis and lets content determine sizing, which makes it right for navigation bars, toolbars, button rows, card internals and anything where you want items to flow and adapt. Grid controls rows and columns simultaneously and lets you place items into a defined structure, which makes it right for page-level layouts, dashboards and galleries that must align in both directions. They compose well: a Grid page layout whose individual cells use Flexbox internally is probably the most common modern pattern.
A few practical notes that save time. The gap property now works in Flexbox across every current browser, so the old negative-margin hacks for spacing children are obsolete and should be deleted on sight. align-content only does anything when items actually wrap onto multiple lines, which is why it appears to be ignored with the default nowrap. The order property changes visual order only, not DOM order, so keyboard and screen-reader users still traverse the original sequence — use it for cosmetic rearrangement at breakpoints, never to fix a genuinely wrong source order. And a flex item will refuse to shrink below its content size unless you set min-width to 0, which is the cause of almost every overflowing flex container.
Pair this with our Box Shadow Generator for depth on your cards, the CSS Gradient Generator for surfaces, and the HTML Minifier when the markup is ready to ship.
Frequently Asked Questions
When should I use Flexbox instead of CSS Grid?
Use Flexbox when you are laying out along a single axis and want the content to influence sizing: navigation bars, toolbars, button groups, form rows, the inside of a card, or any row of items that should flow and adapt. Use Grid when you need to control rows and columns at the same time and place items into a defined structure: page layouts, dashboards, image galleries and anything that must align in both directions. They are not competitors and the most common modern pattern combines them, with Grid handling the page skeleton and Flexbox handling the contents of each region.
What is the difference between flex-basis and width?
flex-basis sets the starting size of an item along the main axis before any growing or shrinking is applied, and it takes priority over width when both are set. The important difference is that flex-basis is direction-aware: in a row it behaves like width, but in a column it controls height instead. That makes it the correct choice for any component that switches direction at a breakpoint, since width would keep applying horizontally and break the column layout. The popular shorthand flex: 1 sets basis to 0, which tells items to ignore their content size and divide the available space evenly.
What do the justify-content values actually do?
They distribute items along the main axis. flex-start packs them at the beginning and flex-end at the end, while center groups them in the middle. The three space values differ in how they treat the edges: space-between puts all the free space between items so the first and last sit flush against the container edges, space-around gives each item an equal margin so the gaps at the edges are half the size of the gaps between items, and space-evenly makes every gap identical including the edges. Remember that the main axis flips when flex-direction is column, so these then work vertically.
What is the difference between align-items and align-self?
They control the same thing, positioning along the cross axis, but at different scopes. align-items is set on the container and applies to every child at once, which is what you want most of the time. align-self is set on an individual item and overrides whatever the container specified for that one item only. The classic use case is a toolbar where every item is centred but one element, such as an avatar or a badge, needs to sit at the bottom. The default value of align-self is auto, which simply means inherit whatever align-items says.
How does flex-grow actually work?
It distributes leftover free space, not total width. After every item is laid out at its flex-basis, the browser measures what space is left over and shares it out in proportion to the flex-grow values. If three items all have flex-grow 1 they each receive a third of the remainder, and if one has 2 while the others have 1 it receives half. Crucially the result is not that items end up in a 2:1 ratio overall, because each still keeps its own base size first. To get true proportional widths you also need flex-basis set to 0, which is exactly what the flex: 2 and flex: 1 shorthands do.
Why is align-content not doing anything?
Because it only applies when flex items wrap onto more than one line. With the default flex-wrap value of nowrap there is only ever a single line, so there is nothing for align-content to distribute and the property is ignored entirely. Set flex-wrap to wrap, give the container a height taller than the wrapped lines need, and align-content will start controlling how those lines are spaced vertically. It is worth being clear about the division of labour: align-items positions items within their own line, while align-content positions the lines themselves within the container.
Can I use the gap property with Flexbox?
Yes, and you should. gap works in Flexbox across every current browser and has done since 2021, so the old workarounds using negative margins on the container plus padding on each child are obsolete. gap is strictly better because it only applies space between items and never adds an unwanted margin at the outer edges, which means no compensating negative margin and no leaking layout. You can set row-gap and column-gap independently if you need different spacing on each axis in a wrapped layout. If you find negative-margin gutter hacks in an existing codebase, they can safely be replaced.
Does the order property affect accessibility?
Yes, and it is a real trap. order changes only the visual painting order, leaving the DOM untouched, so keyboard focus and screen-reader narration still follow the original source sequence. If you visually move a submit button above a set of inputs using order, a keyboard user will still reach it last, and the mismatch between what is seen and what is traversed is disorienting. The WCAG guidance is that a meaningful sequence must be preserved. Use order for cosmetic rearrangement at breakpoints where the reading order stays sensible, and fix genuinely wrong ordering in the markup instead.