ToolsHub
CSS Generators

CSS Flexbox Generator

See what each flexbox property does while you change it. Set the direction, wrapping, alignment and gap of a container, choose how its items size themselves, and copy the resulting CSS with only the declarations you actually need.

  • Runs in your browser
  • No sign-up
  • Free to use

Container

Items

How to use CSS Flexbox Generator

  1. Start from a preset such as “Centre everything” or “Navbar”, or from the default row.
  2. Change flex-direction, flex-wrap, justify-content and align-items and watch the items move.
  3. Set the gap, the number of items and how items grow.
  4. Copy the CSS and the HTML skeleton.

CSS Flexbox Generator features

All container properties

Direction, wrap, justify-content, align-items, align-content and gap.

Item sizing

Natural content size, equal growth with flex: 1, or a fixed basis.

Live layout

Up to twelve items of different heights, so every alignment option is visible.

Minimal code

Declarations that equal the default value are left out.

Common patterns

Presets for centring, a navigation bar, wrapping cards and a vertical stack.

Explains itself

Notes when a setting has no effect, such as align-content without wrapping.

When to use CSS Flexbox Generator

  • Centring an element horizontally and vertically.
  • Laying out a header with a logo on one side and links on the other.
  • A row of cards that wraps onto new lines on small screens.
  • Learning flexbox by experimenting with the properties.

CSS Flexbox Generator FAQ

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

justify-content distributes items along the main axis, the direction in which they flow: horizontal for a row, vertical for a column. align-items positions them on the cross axis, at right angles to that. Changing flex-direction swaps what the two properties do visually.

How do I centre an element with flexbox?

Set display: flex, justify-content: center and align-items: center on the parent. The child is then centred in both directions, provided the parent has some height to centre within. This is the “Centre everything” preset.

What does flex: 1 mean?

It is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0. Every item with flex: 1 receives an equal share of the available space, regardless of its content. It is the usual way to make equal-width columns.

When does align-content apply?

Only when the container wraps and has more than one line of items. It then distributes the lines within the container. With a single line it does nothing, which is why the generator omits it in that case.

Should I use gap or margins?

gap is simpler: it adds space only between items, never at the outer edges, and needs no negative margins or :last-child rules. It is supported for flexbox in all current browsers.

When should I use grid instead of flexbox?

Flexbox arranges items in one direction and lets content determine sizes; it suits toolbars, navigation and groups of buttons. Grid controls rows and columns together and suits page layouts and anything that must line up in two dimensions. Many layouts use both.

CSS Grid Generator Lay out a grid in seconds and take away clean code. Choose a fixed number of… CSS Transform Generator Move, turn, stretch and tilt an element with sliders and copy the exact transform… CSS Border Radius Generator Round corners exactly the way you want. Move one slider for all corners or set… CSS Button Generator Create a button that looks finished in every state. Choose the style, colours… HTML Boilerplate Generator Start a web page from a correct foundation. Fill in the title and the files you… CSS Animation Generator Pick an effect, tune its timing and copy ready-to-use keyframes. Fifteen common…

Thinking in flexbox

Flexbox is a layout method for arranging items along a line. The container sets the rules, and its direct children follow them. Almost everything about flexbox becomes clear once two axes are understood. The main axis runs in the direction set by flex-direction. The cross axis runs perpendicular to it. Every alignment property refers to one of these two axes, never to “horizontal” or “vertical” as such.

Along the main axis, justify-content decides what happens to leftover space. Items can be packed at the start, the centre or the end, or the space can be shared out: space-between puts it only between items, space-around gives each item equal space on both sides, and space-evenly makes all gaps identical, including those at the edges.

Across the axis, align-items decides how items of different heights relate to each other. The default, stretch, makes them all as tall as the tallest, which is why flex columns have equal height without any extra work. The alternatives pin items to the start, centre or end of the line, or align them by their text baselines, which is useful when items contain text of different sizes.

Wrapping turns one line into several. With flex-wrap: wrap, items that do not fit move to a new line, and a combination of a fixed basis and wrapping produces a responsive row of cards with no media queries. At that point align-content becomes relevant, distributing the lines themselves. The generator leaves it out when it would have no effect, which keeps the output a faithful description of the layout you see.

Other useful tools