CSS Flexbox Generator

Build CSS flexbox layouts visually. Configure container and item properties, preview live, and copy the CSS.

Container Properties

Direction

Justify Content

Align Items

Wrap

Align Content

Gap

Live Preview

Click an item to configure its flex properties

CSS Output

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

Layout Presets

About CSS Flexbox

Flexbox is a one-dimensional layout model that distributes space among items in a container and controls their alignment.

flex-direction sets the main axis. row is horizontal (default), column is vertical.

justify-content aligns items along the main axis. align-items aligns items along the cross axis.

flex-grow controls how much an item grows relative to siblings. flex-shrink controls how much it shrinks. flex-basis sets the initial size before growing or shrinking.

flex-wrap allows items to flow onto multiple lines when they exceed the container width. align-content controls spacing between wrapped lines.

gap adds consistent spacing between flex items without needing margins.