How do I centre a div with flexbox?

Set the container to display: flex, then justify-content: center and align-items: center. That centres the items on both the main and cross axes. In this tool, choose center for both alignment controls and copy the CSS. Vertical centring only shows when the container is taller than its content, so give it a height, such as min-height: 100vh for a full-screen hero.

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

justify-content distributes items along the main axis, which is horizontal for a row and vertical for a column. align-items positions items on the cross axis, perpendicular to the main axis. Changing flex-direction swaps which axis each one controls.

When does align-content have an effect?

align-content only affects layout when items wrap onto more than one line, because it spaces those lines apart on the cross axis. With flex-wrap set to nowrap there is a single line, so the property does nothing and this tool omits it from the output.

Does this flexbox generator support the gap property?

Yes. The Gap slider sets gap from 0 to 80px, and the line is left out of the rule at 0. gap puts a consistent space between flex items without adding margins to each item. It applies between items on the same line and between wrapped lines, and it avoids the edge-margin problems that margin-based spacing creates. The slider sets one value for both directions; for a different row and column gap, edit it to two values such as gap: 24px 16px.

Can I set flex-grow, flex-basis or order on individual items?

No. The generator writes only the container rule, so item properties such as flex-grow, flex-shrink, flex-basis, order and align-self are not in the panel. Add them to the child elements yourself, for example flex: 1 on a search box so it fills the space left in a navbar.

What is the difference between flex and inline-flex?

display: flex makes the container a block-level box that takes the full available width. display: inline-flex makes it an inline-level box that sits in the text flow and is only as wide as its content, while both lay out their children with the same flex rules.

Does flexbox replace CSS Grid?

No. Flexbox is a one-dimensional model for laying items along a single axis, ideal for toolbars, navigation, and rows of cards. CSS Grid is two-dimensional for rows and columns together. They are complementary and often used in the same layout.

Is the generated CSS safe to use in production without prefixes?

Yes. Flexbox is supported unprefixed in every modern browser, so the tool emits standard properties with no -webkit- versions. The gap property arrived in flexbox later than the rest, so only very old browsers that predate it will ignore that one line. All processing happens in your browser, so nothing is uploaded and the tool works offline once loaded.

Flexbox Generator

Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.

display

flex-direction

flex-wrap

justify-content

align-items

align-content

Gap:16px

Preview items: 5

Preview

Generated CSS

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

Category:css

Mode:Offline

Version:1.0.0

Access:Free

What is the Flexbox Generator?

The Flexbox Generator is a visual playground for CSS Flexible Box Layout. You set the container properties with menus and a gap slider, watch a live preview rearrange the items in real time, and copy the exact CSS the preview is using. It removes the guesswork from remembering which property does what, so you can build a row, a column, a centred layout, or a wrapping grid of cards without trial and error in the browser dev tools.

Here is the CSS flexbox generator building a typical navbar. Starting from the defaults, set justify-content to space-between and align-items to center. The five preview items spread to the edges of the row, and the Generated CSS box lists display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 16px;. Change flex-wrap to wrap and an align-content line appears, because it only matters once items can wrap. Drag Gap to 0 and the gap line drops out of the rule.

Flexbox is a one-dimensional layout model: items are laid out along a main axis and aligned on the cross axis. The container drives almost everything through six properties. flex-direction chooses the main axis and whether it runs forward or backward. justify-content distributes free space along the main axis. align-items positions items on the cross axis. flex-wrap decides whether items overflow onto new lines, and align-content spaces those lines apart once wrapping is on. gap adds consistent spacing between items without margins.

This tool exposes all of those properties in one place and shows the result immediately. Because the preview is rendered with the same declarations that appear in the output box, what you see is exactly what you get when you paste the CSS into your stylesheet. The generated rule targets a .container class by default and lists only the properties that matter, including align-content only when wrapping is enabled, since it has no effect on a single line.

Everything runs entirely in your browser. There is no signup, nothing is uploaded, and the tool keeps working offline once the page has loaded. It is equally useful as a learning aid for understanding how the flex properties interact and as a quick way to produce production-ready CSS. Change the number of preview items, resize the container in your head, and read off the declaration that produces the alignment you want, whether that is a navbar spread with space-between or a hero section perfectly centred on both axes.

How to use the Flexbox Generator?

Choose direction and wrap

Pick the flex-direction and whether items should wrap onto multiple lines.

Set alignment

Adjust justify-content on the main axis and align-items on the cross axis until the preview matches your layout.

Tune spacing

Set the gap between items and, when wrapping is on, the align-content that spaces the lines apart.

Copy the CSS

The generated rule updates live. Copy it in one click and paste it into your stylesheet.

Key Features

Live Preview

A container of sample items reflows instantly as you change properties, so you see the layout before copying any code

Every Container Property

Control display, flex-direction, flex-wrap, justify-content, align-items, align-content and gap from one panel

What You See Is What You Get

The preview uses the same declarations as the output, so the copied CSS produces exactly the layout on screen

Clean, Minimal Output

The generated rule lists only meaningful properties and omits align-content until wrapping is turned on

Frequently Asked Questions

A CSS flexbox generator is a visual tool that lets you set flex container properties and copy the resulting CSS. You adjust justify-content, align-items, direction, wrap and gap, see a live preview, and paste the generated rule into your stylesheet.

Related Tools

CBR

css

CSS Border Radius Generator

Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.

CBS

css

CSS Box Shadow Generator

Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.

CUC

css

CSS Unit Converter

Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.

CSS

css

CSS Gradient Generator

Create beautiful CSS gradients with live preview

Comments

0 comments

No comments yet. Be the first to share your thoughts!

flexbox generatorcss flexbox generatorflex layout generatorjustify-content align-itemsflexbox playgroundcss flex generatorflexbox cheat sheetgenerate flexbox css

Learn more

Read the full Flexbox Generator guide

Command Palette