Flexbox Generator

Create flexbox layouts with visual controls. Adjust flex properties, alignment, spacing, and see live preview with generated CSS code.

Features

Visual flex container controlsLive preview with itemsAll flexbox propertiesResponsive designCopy CSS codeCommon layout presets

Flexbox Generator

Quick Presets

Container Properties

flex-direction

flex-wrap

justify-content

align-items

gap: 0px

Items

Number of Items

flex-grow: 0

flex-shrink: 1

flex-basis

Live Preview

Container:

H:px

Container: 200px height • Items: 3

Generated CSS

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

Flexbox Quick Guide

Main Axis (justify-content)

flex-start - Start of container

flex-end - End of container

center - Center of container

space-between - Even spacing

space-around - Equal space around

space-evenly - Equal space everywhere

Cross Axis (align-items)

stretch - Fill container

flex-start - Start of cross axis

flex-end - End of cross axis

center - Center of cross axis

baseline - Text baseline

Item Properties

flex-grow - How much to grow

flex-shrink - How much to shrink

flex-basis - Initial size

Shorthand: flex: grow shrink basis