Home › Generators › Flexbox Generator

Flexbox Generator

Build a CSS flexbox layout without writing code. Pick a direction, set the alignment and spacing, and watch the preview update as you go. When the layout looks right, copy the finished CSS and paste it into your own stylesheet.

How it works

Flexbox starts with a container and the items inside it. Setting display: flex on the container turns its children into flex items and lines them up along the main axis. The main axis runs left to right when flex-direction is row, and top to bottom when it is column. The cross axis always runs at right angles to the main axis, so in a row layout the cross axis is vertical.

flex-direction chooses the direction items flow. Row is the default and reads left to right; row-reverse flips it so the first item sits on the right. Column stacks items from top to bottom, and column-reverse stacks them from the bottom up. Reverse directions are handy for right-to-left layouts or for putting an image below its text on small screens without changing the HTML.

justify-content spreads items along the main axis. Flex-start packs them at the start, center groups them in the middle, and flex-end packs them at the end. Space-between pushes the first item to the start and the last item to the end with equal gaps between the rest. Space-around and space-evenly add space around every item too, with space-evenly making every gap exactly equal.

align-items lines items up along the cross axis. Center is the most used value — it centers every item vertically in a row layout. Stretch, the default, makes items fill the full height of the container. Flex-start and flex-end pin items to the top or bottom, and baseline lines up the text inside items that have different font sizes.

flex-wrap decides what happens when items run out of room. With nowrap, the default, items shrink to fit on one line, which can squeeze them badly. With wrap, extra items drop to a new line, which is what you usually want for card grids. Gap sets the space between items in pixels — one value that replaces fiddly margins on every item. Change any control and the preview and the CSS update together, so the code you copy always matches what you see.

Worked example

Suppose you are building a row of five product cards for a small shop website. You want the cards spread across the full width, centered vertically, with a 16-pixel gap, and wrapping to a new line on narrow screens. Set the controls like this:

Step 1: Set flex-direction to row, so the cards run left to right.
Step 2: Set justify-content to space-between, so the first card touches the left edge, the last card touches the right edge, and the gaps between cards are equal.
Step 3: Set align-items to center, so shorter cards sit in the middle of the row instead of stretching.
Step 4: Set flex-wrap to wrap and the gap to 16 px, with the item count at 5.

The preview shows five blue boxes spread across the row, and the tool produces exactly this CSS:

Copy that block, paste it into your stylesheet, and give your card row the class container. On a wide screen the five cards sit on one line; on a phone the last cards wrap neatly underneath with the same 16-pixel gap.

FAQ