Flexbox Introduction

Take Quiz (1)

CSS Flexbox

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to align and distribute space among items in a container — even when their sizes are unknown.

How to Enable

Add display: flex to a container. Its direct children become flex items.

Two Axes

Main axis — Direction of item flow (horizontal by default)
Cross axis — Perpendicular to main axis (vertical by default)

Flex Container vs Flex Items

Properties like justify-content, align-items, flex-direction go on the container. Properties like flex, align-self go on items.

Example

.container {
  display: flex;
  gap: 16px;
}

/* Items sit side by side automatically */
.item {
  padding: 16px;
  background: #6366f1;
  color: white;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned