CSS Flexbox Guide

Introduction

Flexbox is a powerful layout module in CSS3 designed for distributing space and aligning items in a container, even when their size is unknown or dynamic. This guide covers all flexbox properties, patterns, and practical examples.

Flex Container Properties

display

display: flex | inline-flex;

Defines a flex container; enables flex context for all its direct children.

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.container {
  display: flex;
}

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

Defines the direction of the main axis.

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

Controls whether flex items are forced onto one line or can wrap onto multiple lines.

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Aligns items along the main axis.

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between;
}

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

Aligns items along the cross axis.

HTML

<div class="container" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Aligns lines of items in a multi-line flex container.

HTML

<div class="container" style="height: 300px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 300px;
}

Flex Item Properties

order

order: <integer>;

Controls the order in which items appear in the flex container.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.item:nth-child(2) {
  order: -1;
}

flex-grow

flex-grow: <number>;

Defines the ability for a flex item to grow if necessary.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.item {
  flex-grow: 1;
}
.item:nth-child(2) {
  flex-grow: 2;
}

flex-shrink

flex-shrink: <number>;

Defines the ability for a flex item to shrink if necessary.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.item {
  flex-shrink: 1;
}
.item:nth-child(2) {
  flex-shrink: 0;
}

flex-basis

flex-basis: <length> | auto;

Defines the default size of an element before the remaining space is distributed.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.item {
  flex-basis: 200px;
}
.item:nth-child(2) {
  flex-basis: auto;
}

flex

flex: none | [ <flex-grow> <flex-shrink>? <flex-basis>? ];

Shorthand for flex-grow, flex-shrink, and flex-basis combined.

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.item {
  flex: 1 1 100px;
}
.item:nth-child(2) {
  flex: 2 0 auto;
}

align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Allows the default alignment to be overridden for individual flex items.

HTML

<div class="container" style="height: 200px;">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
}
.item:nth-child(2) {
  align-self: flex-end;
}

Common Flexbox Patterns & Examples

Horizontal Centering

.container {
  display: flex;
  justify-content: center;
}

Vertical Centering

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

Space Between

.container {
  display: flex;
  justify-content: space-between;
}

Wrapping Items

.container {
  display: flex;
  flex-wrap: wrap;
}

Interactive Flexbox Playground

Experiment with different flexbox properties and see the CSS code generated automatically!

Resources

CSS-Tricks Flexbox Guide
The most comprehensive and visually appealing flexbox reference with detailed explanations, visual diagrams, and practical examples. Perfect for both beginners and advanced developers.
MDN Flexbox Documentation
The authoritative technical documentation from Mozilla. Features in-depth explanations, browser compatibility information, and the most up-to-date specifications for flexbox properties.
Flexbox Froggy (Interactive Game)
A fun, interactive game that teaches flexbox concepts through 24 levels of challenges. Learn by helping Froggy and friends reach their lily pads using CSS flexbox properties.