CSS Flexbox Playground

Master CSS Flexbox by experimenting with flex properties and seeing instant visual results.

Category: Web Development · v1.0.0

Step 1 of 4

Step 1: What is Flexbox?

Flexbox is a CSS layout model that makes it easy to align and distribute space among items in a container.

To enable Flexbox, set display: flex on a container. Its children become flex items.

.container {
  display: flex;
  /* Items now flow horizontally by default */
}

Key concepts:

Main axis — the primary direction items flow (default: horizontal)
Cross axis — perpendicular to the main axis

Step 2: Direction & Justify

flex-direction sets the main axis. justify-content distributes items along it.

flex-direction

justify-content

display: flex;
flex-direction: row;
justify-content: flex-start;

Step 3: Align & Wrap

align-items positions items on the cross axis. flex-wrap controls whether items can wrap to new lines.

align-items

flex-wrap

gap

display: flex;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

About This Lab

Flexbox is one of the most powerful layout tools in CSS. This interactive lab lets you experiment with key flex properties — direction, alignment, wrapping, and spacing — while seeing how each change affects the layout in real time. Perfect for both beginners learning Flexbox for the first time and developers who want a quick refresher.

How It Works