Flexbox Playground

Interactive flexbox container and child item playground with instant visual preview and CSS output.

Container Settings

flex-direction

justify-content (main axis)

align-items (cross axis)

flex-wrap

gap16px

Item #1

Item Properties

flex-grow

align-self

Interactive Stage

Item

CSS Flexbox Container

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

How It Works

The CSS Flexible Box Layout (Flexbox) provides responsive one-dimensional arrangement of elements along either a horizontal row or vertical column axis:

Main Axis: Controlled by flex-direction and aligned using justify-content.
Cross Axis: Perpendicular to the main axis and aligned using align-items.
Flex Items: Individual child elements can expand (flex-grow), contract (flex-shrink), or alter their sorting order without editing the DOM tree.

Related Frontend Tools

Browse all 17 tools →

Core

CSS Unit Converter

Convert rem, px, em, viewport, and physical CSS dimensions with real-time accuracy.

Popular

Color Converter

Bidirectional color conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, and OKLCH.

WCAG

Color Contrast Checker

Calculate WCAG 2.1 contrast ratios and verify accessibility compliance for normal text, large text, and UI components.