Skip to content
ToolsOnDuty - free online tools
CSS & Design

CSS Flexbox Generator

Build a flexbox layout visually and copy the CSS.

Free foreverRuns in your browserNo sign-up
1
2
3
4
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

About the CSS Flexbox Generator

Flexbox is the go-to CSS layout for rows and columns, but remembering every property and value is hard.

This visual generator lets you set direction, justify-content, align-items, wrap and gap and see boxes rearrange instantly, then copy the CSS.

It runs entirely in your browser.

Key features

  • Direction, justify, align, wrap and gap
  • Live box preview
  • Copy the flexbox CSS
  • Runs in your browser

How to use

  1. 1Choose the flex properties.
  2. 2Watch the boxes rearrange.
  3. 3Copy the CSS.

Examples

Centered row
Output: display: flex; justify-content: center; align-items: center;

The classic recipe to centre items both horizontally and vertically.

Frequently asked questions

What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (the flex-direction), while align-items aligns them along the cross axis.
When should I use flexbox vs grid?
Flexbox is best for one-dimensional layouts (a row or a column). CSS Grid is better for two-dimensional layouts with rows and columns together.
What does gap do?
gap adds consistent spacing between flex items without needing margins on each child.

Related tools