Visual CSS builder

CSS Flexbox Generator

Shape a one-dimensional layout, select any preview item to tune its flex behavior, and copy production-ready CSS and matching HTML. Everything runs locally in your browser.

Container settings

Display

Direction

Wrapping

Main-axis distribution

Cross-axis item alignment

Wrapped-line alignment Visible only with multiple lines and spare cross-axis space.

Row gap (px)

Column gap (px)

Preview items (1–12) Applied when you press Enter or leave the field, so unfinished typing does not remove customized items.

Selected item

Editing item 1 of 4.

Flex grow

Flex shrink

Flex basis Try auto, 0, 16rem, 240px, 30%, min-content, or max-content.

Visual order

Align self

Live preview

Preview axes (LTR): main horizontal → · cross vertical ↓

Select an item to edit it. The badge and outline identify the selection without relying on color.

Generated output

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

How to use the generator

Choose a preset or set the container’s direction, wrapping, alignment, and gaps.
Select a numbered item to change how it grows, shrinks, aligns, and participates in visual ordering.
Copy the CSS and HTML, then replace the example class names or content in your project.

The output includes every container setting for clarity. Item-specific rules are emitted only when that item differs from the Flexbox defaults.

Read the axes correctly

flex-direction establishes the main axis. In a row, justify-content distributes items horizontally and align-items works vertically; in a column, those roles rotate. The preview’s LTR axis label updates for reverse directions, and wrap-reverse reverses the cross axis.

align-content distributes whole flex lines, not individual items. It requires wrapping, more than one line, and extra cross-axis space before its effect can be seen.

Limits, accessibility, and privacy

Flexbox is designed for layout in one dimension at a time. Use CSS Grid when rows and columns must be coordinated together. The preview is illustrative: fonts, intrinsic content, writing mode, container size, and min/max sizes in your site can change the result.

Reverse directions and order change only visual placement, not DOM, reading, or keyboard focus order. Keep meaningful source order for accessible content.

No layout data is uploaded, stored, or sent to an API. The copy and download actions happen only in your browser.