CSS Flexbox Generator

A free tool to experiment with Flexbox layouts by adjusting flex-direction, justify-content, align-items, flex-wrap, and gap through a live preview. Copy the generated CSS code with one click.

Last updated: 2026-09-20

Building a Flexbox layout by hand

Flexbox is the layout method for arranging elements along a single axis. This tool lets you switch `flex-direction`, `justify-content`, `align-items`, `flex-wrap` and `gap` on screen, see the result as you go, and copy the finished CSS straight out.

**Almost every difficulty with Flexbox comes down to which way `justify-content` and `align-items` act.** The first governs placement along the **main axis** and the second along the **cross axis**. What makes it awkward is that **the moment you change `flex-direction` from `row` to `column`, those two axes swap over.** The `justify-content` that handled the horizontal while items sat side by side comes to handle the vertical once they are stacked. Most complaints that something "will not centre" amount to **not having noticed that the property to change has swapped.**

How to use it

Start from a preset Common arrangements such as centring, spacing apart and stacking are ready to hand.
Switch flex-direction **Moving between `row` and `column` makes the swapping of the axes visible.**
Try the alignment properties Change `justify-content` and `align-items` in turn and confirm how each behaves.
Copy the generated CSS Once the arrangement satisfies you, it can be pasted straight into your code.

Tips for getting more out of it

justify-content aligns items along the "main axis" while align-items aligns them along the "cross axis". Switching flex-direction to column flips the main axis to vertical, so the visual effect of these two properties swaps.
The "Centered" preset combines justify-content: center with align-items: center, which is the most common way to center an element both horizontally and vertically with Flexbox.
The gap property only adds space between items, not around the outside of the container, so unlike margin it creates even spacing between siblings without extra padding at the edges.
Setting align-self on a single item overrides the container's align-items just for that item, which is handy when you want one element to line up differently from the rest.
Enabling flex-wrap: wrap lets items that no longer fit the container's width (or height, in column mode) drop onto the next line automatically, a common technique for responsive card layouts.

Where it comes in useful

Assembling a navigation bar

**Putting the logo left and the menu right is the classic case for `justify-content: space-between`.**

Spacing cards evenly

Using `gap` spares you the contrivance of cancelling out `margin` for the sake of even spacing.

Centring an element in both directions

**Setting both `justify-content` and `align-items` to `center` is the shortest route.**

Learning Flexbox

Changing a value and watching the result teaches it faster than any amount of reading.

Flexbox terms

Main axis: The direction along which items are laid out, set by `flex-direction`. **It runs horizontally for `row` and vertically for `column`.**
Cross axis: The direction at right angles to the main axis. **When the main axis swaps, this one swaps with it.**
Justify-content: Governs placement **along the main axis**, offering centring, spacing apart, even distribution and the rest.
Align-items: Governs placement **along the cross axis**. Under the default `stretch`, children grow to the full height.
Flex-wrap: Decides whether items that do not fit wrap onto a new line. Left at `nowrap` they are squeezed in instead.
Gap: The space left between items. **Unlike `margin`, it adds no stray space at the outer edges.**

Frequently Asked Questions

justify-content controls alignment along the Flexbox "main axis" (the direction set by flex-direction, horizontal by default), while align-items controls alignment along the perpendicular "cross axis". With flex-direction: row the main axis is horizontal, so justify-content handles horizontal placement and align-items handles vertical placement — but switching to flex-direction: column flips the main axis to vertical, so the two properties effectively swap roles.

When flex-direction is column, the main axis runs vertically, so justify-content: center centers items vertically. To also center them horizontally (the cross axis), use align-items: center. Combining both lets you center content both ways even in a stacked column layout.

Flexbox gap support lagged in Chrome and Safari until around 2021, but it is now supported in all major browsers (Chrome 84+, Safari 14.1+, Firefox 63+). If you need to support very old browsers, consider using margin as a fallback.

flex-grow controls how much an item expands to fill leftover space when the container has extra room, while flex-shrink controls how much an item shrinks when the container is too narrow to fit everything at its default size. Both properties determine how surplus or shortfall is distributed relative to an item's base size (flex-basis).

Flexbox generally works best for laying out items along a single direction (a row or a column), such as a navigation bar or a row of cards. CSS Grid, on the other hand, is designed for controlling rows and columns simultaneously in a true two-dimensional layout, such as an entire page grid. As a rule of thumb, reach for Flexbox for simple linear arrangements and Grid for more complex grid-like structures.

Side Note — How Flexbox Changed CSS Layout History

Before CSS Flexbox (formally the CSS Flexible Box Layout Module) arrived, horizontal layouts on the web were typically built using the float property. But float was originally designed to let text wrap around an image, not to build layouts, so using it for that purpose required many workarounds — most famously the "clearfix" hack to prevent a parent element's height from collapsing.

Flexbox, whose first draft was published by the W3C in 2009, was designed specifically for one-dimensional layouts. Tasks that once needed multiple lines of CSS hacks with float — stretching elements along the main axis, distributing space evenly, or vertically centering content — could now be expressed with a single declarative property like justify-content or align-items.

Once major browsers finished implementing Flexbox around 2015, it quickly became the standard way to build common web design patterns such as navigation bars, card layouts, and form alignment. Front-end developers at the time particularly welcomed the fact that vertical centering, long considered one of CSS's trickiest problems, finally had a straightforward solution.

Today, Flexbox coexists with CSS Grid, which specializes in two-dimensional layouts, with each handling a different role: Flexbox for laying out components along a single direction, and Grid for structuring the page as a whole grid.

Browse all trivia