All Tools

CSS Flexbox Generator

Interactively configure a flex container — direction, wrap, alignment — and fine-tune each flex item's grow, shrink, basis, and align-self. See a live preview and copy the generated CSS instantly.

3 items
1
2
3

Click an item to edit its properties below

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

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

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

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
Buy me a coffee

Container properties

flex-direction: Sets the main axis — row, row-reverse, column, or column-reverse.
flex-wrap: Whether items wrap to multiple lines — nowrap, wrap, wrap-reverse.
justify-content: Alignment along the main axis — flex-start, flex-end, center, space-between, space-around, space-evenly.
align-items: Alignment along the cross axis for a single line.
align-content: Alignment of multiple lines (only active when flex-wrap is enabled).

Item properties

flex-grow: How much the item grows relative to siblings when there's extra space.
flex-shrink: How much the item shrinks relative to siblings when space is tight.
flex-basis: The initial size of the item before growing or shrinking.
align-self: Overrides the container's align-items for this specific item.

Related Tools

CSS Box Shadow Generator

Build CSS box shadows visually with sliders. Add multiple layers, control blur, spread, color, and opacity.

CSS Gradient Generator

Build beautiful CSS linear and radial gradients visually. Customize colors, stops, and angle — copy the ready CSS.

CSS Gradient Text Generator

Create gradient text effects online. Pick 2–4 colors, choose direction, and copy the ready-to-use CSS background-clip code.

CSS Variables Generator

Build a complete CSS custom properties :root block for colors, spacing, typography, and border radius. Copy instantly.

CSS Grid Generator

Build CSS grid layouts visually. Configure columns, rows, gaps, drag to create spans, and copy the generated CSS.

CSS Border Radius Generator

Visually generate border-radius CSS with independent corner controls and live preview.

CSS Text Shadow Generator

Create layered CSS text-shadow effects with live preview and one-click copy.

CSS Filter Generator

Generate CSS filter effects — blur, brightness, contrast, hue-rotate, saturate, sepia, and more — with a live image preview.

CSS Clip Path Generator

Generate CSS clip-path shapes interactively — polygons, circles, and ellipses — with a live preview. Drag control points.

CSS Animation Generator

Build CSS @keyframe animations visually with timing, easing, delay, and iteration controls.