Flexbox Labs — Interactive CSS Flexbox Playground
Cheat SheetExamplesAboutGrids beta
Star on GitHub

CSS Flexbox Cheat Sheet

CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model designed for distributing space and aligning items in web applications. Use this quick reference guide and visual preview for every flexbox property.

Open Interactive Playground

Flexbox Container Properties

display: flex

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

1
2
3
container {
  display: flex;
}
Open in Playground

flex-direction

Establishes the main axis, defining the direction flex items are placed in the container.

1
2
3
container {
  display: flex;
  flex-direction: column;
}
Open in Playground

justify-content: center

Aligns flex items along the main axis of the current line of the flex container.

1
2
3
container {
  display: flex;
  justify-content: center;
}
Open in Playground

justify-content: space-between

Distributes flex items evenly along the main axis; first item is on the start line, last on the end line.

1
2
3
container {
  display: flex;
  justify-content: space-between;
}
Open in Playground

align-items: center

Defines the default behavior for how flex items are laid out along the cross axis on the current line.

1
2
3
container {
  display: flex;
  align-items: center;
  height: 100px;
}
Open in Playground

flex-wrap: wrap

Allows flex items to wrap onto multiple lines from top to bottom when space is insufficient.

1
2
3
container {
  display: flex;
  flex-wrap: wrap;
}
Open in Playground

gap

Explicitly controls the space between flex items, establishing row and column gutters.

1
2
3
container {
  display: flex;
  gap: 16px;
}
Open in Playground

Flexbox Item Properties

flex-grow

Defines the ability for a flex item to grow if necessary, dictating how much space it should take.

1
2 (Target)
3
item {
  flex-grow: 1;
}
Open in Playground

align-self: flex-end

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

1
2 (Target)
3
item-2 {
  align-self: flex-end;
}
Open in Playground

order

Controls the order in which items appear inside the flex container, regardless of source code order.

1
2 (Target)
3
item-1 {
  order: 3;
}
Open in Playground

Frequently Asked Questions

What does display: flex do in CSS?

display: flex defines an element as a flex container and enables the Flexbox layout model for all of its direct children, allowing them to be positioned and sized flexibly along a main and cross axis.

What is the difference between justify-content and align-items?

justify-content aligns flex items along the main axis (horizontal by default), while align-items aligns them along the cross axis (vertical by default). Common values include flex-start, flex-end, center, space-between, and space-around.

How does flex-grow work?

flex-grow defines how much a flex item will grow relative to the other items inside the same container. A value of 1 means the item can grow to fill available space; a value of 2 means it will grow twice as much as items with flex-grow: 1.

How do I wrap flex items to a new line?

Set flex-wrap: wrap on the flex container. By default, flex-wrap is nowrap, which forces all items onto a single line. With wrap, items will move to the next line when they can no longer fit.

What is the flex-direction property?

flex-direction sets the direction of the main axis along which flex items are placed. Values are row (default, left to right), row-reverse, column (top to bottom), and column-reverse.