CSS Flexbox Generator

A visual CSS flexbox generator that explains itself

This CSS flexbox generator is a playground for one-dimensional layouts. Change the container’s direction, wrapping, justify-content, align-items, align-content and gaps, then click any item to give it its own flex-grow, flex-shrink, flex-basis, order, align-self, size or auto margin. The preview is a real flex container styled with exactly the CSS you copy, so what you see is what the browser will do.

Most flexbox confusion comes from the two axes swapping when you change flex-direction. Arrows above and beside the preview label the main axis and the cross axis, and a note says which property works along each. Six presets – navbar, centred card, holy grail, equal columns, sticky footer and wrapping tags – give you working patterns to start from.

Copy the result as minimal CSS (only properties that differ from the defaults), the matching HTML, or Tailwind CSS classes. Everything runs in your browser and nothing is uploaded.

How to use the CSS Flexbox Generator

1. Pick a preset such as “Navbar” or “Equal columns”, or press “Reset” for four plain items.
2. Set the container: direction, wrap, justify-content, align-items, align-content, row and column gap, and an optional min height in px or vh.
3. Click an item in the preview (or its chip under “Items”) and change its label, grow, shrink, basis, order, align-self, width, height or auto margin. Use “Add item”, “Duplicate” and “Remove” to change how many items there are.
4. Drag the small square on the selected item’s corner to resize it, or focus it and use the arrow keys (Shift moves 10px).
5. Read the axis note under the preview, then switch between the CSS, HTML and Tailwind tabs and press the copy button.

CSS Flexbox Generator features

Worked example: equal-width columns

Click “Equal columns”. The three items have very different amounts of text, yet they come out exactly the same width, and the generator writes:

.container { display: flex; gap: 16px; } and .item { flex: 1; }

flex: 1 means grow 1, shrink 1, basis 0%. Because every item starts from a basis of zero, all the free space is shared out equally, so in a 600px container each column is (600 − 2 × 16) ÷ 3 ≈ 189.3px wide. With flex: auto instead, items start from their content width and only the leftover space is shared, so longer text gives a wider column. The Tailwind tab shows the same layout as flex gap-4 on the container and flex-1 on each item.

How the flex shorthand is calculated

Each item’s size along the main axis starts at its flex-basis (or its width/height when the basis is auto). If the line has space left over, items with a flex-grow above zero share it in proportion to their grow values. If the items are too big, they shrink in proportion to flex-shrink multiplied by their basis.

Common flexbox mistakes and how to spot them

• justify-content in a column does nothing: a column is only as tall as its content unless you give the container a height or min-height. The sticky footer preset uses min-height: 100vh for that reason.
• align-content seems broken: it only distributes lines, so it needs flex-wrap: wrap and more than one line of items.
• Using order or row-reverse to fix source order: it moves boxes visually only. Keyboard tab order and screen readers still follow the HTML, which can confuse people, so reorder the HTML when the meaning changes.
• Margins instead of gap: gap puts space only between items, never at the outer edges, and is supported by every current browser.
• Flexbox for a two-dimensional layout: when rows and columns must line up with each other, use CSS Grid – try the CSS Grid Generator.

Tidy up the rest of the component

Round the items with the Border Radius Generator, add depth with the Box Shadow Generator, and convert pixel gaps to rem with the PX to REM Converter.