How to use the CSS Flexbox Generator
- Pick a preset — center, navbar, wrapping cards, sidebar, stack — or start from scratch.
- Set the container: flex-direction, flex-wrap, justify-content (main axis), align-items (cross axis) and gap.
- Click an item to set its flex-grow, shrink, basis, order and align-self; use + Add item or Remove to change how many there are.
- Resize the container to test it, then copy the CSS, HTML or Tailwind classes.
The two axes of flexbox
Flexbox lays items out along a main axis (set by flex-direction) and a cross axis at right angles to it. justify-content distributes items along the main axis; align-items aligns them on the cross axis. Switch to column and the two swap — which is why “center vertically” sometimes needs justify-content and sometimes align-items.
flex: grow shrink basis
| Shorthand | Means | Use it for |
|---|---|---|
flex: 1 | 1 1 0% | Equal-width columns that share the space |
flex: auto | 1 1 auto | Grow from the content’s own size |
flex: none | 0 0 auto | Fixed items such as a logo or icon |
flex: 1 1 240px | Start at 240px, then grow or shrink | Wrapping card grids |
margin-left: auto on one item pushes it — and everything after it — to the far end, the classic way to right-align a “Sign in” button in a navbar. For two-dimensional layouts with rows and columns, the CSS Grid Generator is the better fit.
Also searched as: flexbox generator, flexbox playground, flexbox builder, justify-content generator, align-items css, flex layout generator, tailwind flex generator, css flex examples.
Tools that pair well with the CSS Flexbox Generator
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.