Does the preview match the generated CSS?

Yes. The live preview is a native Flexbox container styled from the same declaration lists used for the CSS, HTML + CSS and Tailwind exports, so what you see is what you copy.

Can I edit flex properties for one item only?

Yes. Click or keyboard-select an item to edit its flex-grow, flex-shrink, flex-basis, order and align-self. Each item gets its own selector, so changes never leak to other items.

Which presets are included?

Center Everything, Navbar, Sidebar Layout, Equal Cards, Responsive Toolbar, Sticky Footer and Media Object. Loading a preset or Reset can be undone.

CSS Flexbox Generator

Runs locally in your browser

Build Flexbox layouts visually and copy CSS, HTML or Tailwind

Controls

Container

display

flex-direction

flex-wrap

justify-content

align-items

align-content

align-content only affects multiple flex lines. Enable wrapping and add items until they wrap to see it.

gap

Blank: not set. Use normal for the browser default.

row-gap

Blank inherits gap; 0 overrides it.

column-gap

Blank inherits gap; 0 overrides it.

width

Blank: not set. Also auto, fit-content, max-content.

height

Blank: not set. Also auto, fit-content, max-content.

Units: px, rem, em, %, vw, vh, or 0.

Items (3/24)

Up to 24 items.

Selected Item: 1. Item 1

Label

flex-grow

Number ≥ 0, up to 1000.

flex-shrink

Number ≥ 0, up to 1000.

flex-basis

auto, content, or a length such as 120px.

order

Whole number from -999 to 999.

align-self

Live Preview

Main axis →

Cross axis ↓

Main axis → · Cross axis ↓ · row / nowrap

Hatched area shows gap spacing: Row gap 12px · Column gap 12px

Source = position in HTML. order = CSS order, which changes visual placement only.

Generated Code

/* Sample box styles that match the preview */

.flex-container {
  box-sizing: border-box;
  padding: 12px;
  border-width: 1px;
  border-style: dashed;
  border-color: #94a3b8;
  border-radius: 8px;
}

.flex-item {
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border-width: 2px;
  border-style: solid;
  font-size: 14px;
  line-height: 20px;
  border-color: #6366f1;
  border-radius: 6px;
  background: #eef2ff;
  color: #1e1b4b;
}

/* Flexbox layout */

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
  width: 100%;
  height: 220px;
}

.flex-item.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  align-self: auto;
}

.flex-item.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  align-self: auto;
}

.flex-item.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  align-self: auto;
}

Code updates live as you edit.

Runs locally in your browser. Layout settings may be saved in browser storage on this device.

HTML CSS JS PlaygroundWrite frontend code, run it safely, and debug the result in your browser.CSS Beautifier & MinifierFormat, optimize, and minify CSS code Gradient GeneratorBrowse curated CSS gradients or build linear, radial, and conic ones

CSS Flexbox Generator

Build Flexbox layouts visually and copy production-ready CSS, HTML or Tailwind classes.

How to Use

Pick a preset or adjust the container. Click or keyboard-select an item to edit flex-grow, flex-shrink, flex-basis, order and align-self. Add, remove and reorder items, then copy or download CSS, HTML + CSS or Tailwind.

Visual Learning Aids

Guides draw the main and cross axes for the current direction and wrapping, label each item with its source position and CSS order, and hatch the gap spacing between items and lines.

Limits and Privacy

Up to 24 items. Lengths accept nonnegative px, rem, em, %, vw and vh values; calc() and custom CSS are not accepted. Previews assume a horizontal, left-to-right writing mode. Everything runs in your browser and settings may be saved in local storage.

CSS Flexbox Generator

Controls

Items (3/24)

Live Preview

Generated Code

Related Tools