CSS Flexbox Generator

What is the CSS Flexbox Generator?

A CSS flexbox generator is a visual tool that builds Flexbox layouts for you. You set the container’s direction, wrapping, alignment and gap, adjust each item’s growth and order, and watch the layout change in a live preview. The tool then gives you clean HTML and CSS that you can paste into your own page.

Flexbox is CSS’s layout system for arranging items in a row or a column. It is the right tool for navigation bars, card rows, centred content, forms and anything else where items sit in a line and need to share space sensibly. The trouble is that Flexbox has a dozen properties that interact with each other, and the only way to learn what each one does is to try it. This free CSS flexbox generator is built for exactly that: every control updates the preview immediately, and a plain-English explainer under the tool says what each property does.

The tool is for anyone building a website, from beginners meeting Flexbox for the first time to developers who want a navigation bar or a card row without writing the CSS by hand. It runs entirely in your browser — no sign-up, nothing uploaded, nothing you set leaves your device.

How to use the CSS Flexbox Generator

The tool sits at the top of this page. The container and item controls are on the left and the live preview with the generated HTML and CSS is on the right. Follow these steps:

1. Set the display. The “display” dropdown offers flex or inline-flex. flex makes the container a block-level box that takes the full width; inline-flex makes it behave like an inline element that only takes the room it needs.
2. Choose the direction. “flex-direction” sets the main axis: row lays items out left to right, column top to bottom, and the -reverse options flip the order.
3. Set the wrapping. “flex-wrap” decides what happens when the items run out of room. nowrap keeps them on one line even if they overflow; wrap lets them flow onto new lines; wrap-reverse wraps them in the opposite direction.
4. Spread the items. “justify-content” spreads items along the main axis — grouped at the start (flex-start), at the end (flex-end), centred, or spaced out with space-between, space-around or space-evenly. “align-items” lines items up across the other axis. “align-content” only matters when the items wrap onto more than one line — it spreads the rows themselves.
5. Set the gap. “gap (px)” is the space between items, both between rows and between columns. The tool loads with 16 pixels, a comfortable default for card rows.
6. Adjust the items. The tool loads with three items, and the middle one has flex-grow set to 1 so it takes the spare room. Each item has its own controls: flex-grow (0 to 10, how much it grows to fill free space), flex-shrink (0 to 10, how much it shrinks when there is not enough room), flex-basis (its starting size — auto, or a length such as 100px or 25%), align-self (overrides align-items for one item only) and order (-10 to 10, which changes the visual order without moving the item in the HTML). Click “Add an item” to add more, or remove one with its remove button.
7. Copy the code. Click “Copy HTML”, “Copy CSS” or “Copy HTML + CSS”, or “Download example” to save a complete example file. “Clear” empties the output and “Reset” restores the default three-item row.

Worked example: a navigation bar

Say you want a simple header: a logo on the left, links on the right, everything vertically centred. Set “flex-direction” to row, “justify-content” to space-between and “align-items” to center. With space-between, the two items are pushed to opposite ends and the gap between them is the free space. The generated CSS looks like this:

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  gap: 16px;
}

And the HTML is a container with one div per item:

<div class="flex-container">
  <div class="flex-item flex-item-1">Item 1</div>
  <div class="flex-item flex-item-2">Item 2</div>
  <div class="flex-item flex-item-3">Item 3</div>
</div>

Each item also gets its own rule — .flex-item-1, .flex-item-2 and so on — with its flex-grow, flex-shrink, flex-basis, align-self and order. Rename the classes to match your own naming, replace the placeholder text with your logo and links, and the layout is done.

Where to use Flexbox

Navigation bars. This is Flexbox’s most common job. A row with justify-content: space-between puts the logo at one end and the links at the other; align-items: center lines them up vertically. On a narrow screen, change flex-direction to column and the same markup stacks into a vertical menu.

Card rows. Three cards in a row, equal heights, with a gap between them: set the container to row, align-items: stretch (the default) so the cards stretch to the same height, and gap to 16 pixels. Give each card the same flex-grow so they share the width evenly, or give one card a higher flex-grow to make it wider. If the row runs out of room on a phone, flex-wrap: wrap lets the cards drop onto a second row instead of squeezing.

Centring things. Centring a box both horizontally and vertically used to be one of CSS’s hardest jobs. With Flexbox it is two properties: justify-content: center and align-items: center on the container. A login form, a loading spinner or an empty-state message — anything that should sit in the middle of its parent — is a one-line fix once you see it in the preview.

Tips for better Flexbox layouts

Learn the two axes. Everything in Flexbox comes back to the main axis and the cross axis. In a row, the main axis runs left to right and the cross axis runs top to bottom; in a column, they swap. justify-content works on the main axis, align-items on the cross axis. If a property seems to move things in the wrong direction, you are probably thinking about the wrong axis.

Let flex-grow share the space. Instead of setting fixed widths on items, give them flex-grow values and let the browser divide the free space. Three items with flex-grow 1, 1 and 2 take a quarter, a quarter and a half of the room.

Use gap, not margins. The gap property puts space between items without adding space at the edges. Set one gap value and you are done.

Use order for visual order only. The order property changes where an item appears without moving it in the HTML. That is useful, but remember that screen readers and keyboard navigation follow the HTML order, not the visual order. Do not use order to move something important out of its logical place.

Watch out for flex-basis values. flex-basis accepts auto, or a length such as 100px or 25%. Anything else is ignored and auto is used instead. If an item is not the size you expected, check that its flex-basis is a valid value.

Frequently asked questions

What is the difference between Flexbox and Grid?

Flexbox arranges items in one direction — a row or a column. Grid arranges them in two directions — rows and columns at once. Use Flexbox for a line of things (a navigation bar, a row of cards, a form) and Grid for a two-dimensional layout (a photo gallery, a page layout with a sidebar).

What does flex-grow actually do?

It says how much of the free space an item takes, relative to the other items. If three items have flex-grow 1, 1 and 2, the free space is split into four parts and the third item gets two of them. flex-grow: 0 means the item does not grow at all.

Why are my items different heights?

Because align-items defaults to stretch, which makes items fill the container’s height. That is usually what you want for cards. If you want items to keep their own height instead, set align-items to flex-start, flex-end or center.

What is the difference between justify-content and align-items?

justify-content spreads items along the main axis — the direction the items flow in. align-items lines them up across the cross axis — the other direction. In a row, justify-content moves items left and right while align-items moves them up and down. In a column, the two swap.

Do I need to write the CSS myself?

No. The tool writes both the HTML and the CSS for you, with class names .flex-container, .flex-item and .flex-item-1, .flex-item-2 and so on. Copy them, rename the classes to match your own project if you like, and replace the placeholder item text with your real content.

Conclusion

Flexbox turns layout from a puzzle into a set of choices you can see: direction, wrapping, spacing, alignment. Build your layout above with the CSS Flexbox Generator, and copy the code when it looks right. When your layout needs rows and columns at the same time, the CSS Grid Generator on this site builds two-dimensional layouts the same way.

Related Tools

• CSS Gradient Generator
• CSS Grid Generator
• CSS Media Query Generator
• CSS Specificity Calculator