Flexbox Explainer | The School of Code

Settings

Appearance

Choose a typography theme that suits your style

Back to Explainers

Flexbox Explainer

Experiment with flexbox properties and see how they affect layout in real-time. Use the controls on the left to change properties and watch the preview update instantly.

Flexbox Properties

(needs wrap)

Preview

1
2
3
4

Generated CSS

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

Generated CSS

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

About Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. It's perfect for building responsive navigation bars, card layouts, centering content, and more.

💡 Main Axis vs Cross Axis

The main axis is defined by flex-direction. If it's row, the main axis is horizontal. justify-content aligns along the main axis, while align-items aligns along the cross axis.

📦 flex-wrap

By default, flex items try to fit on one line. Use flex-wrap: wrap to allow items to wrap to new lines. This enables align-content to control spacing between lines.

🎯 Centering Made Easy

To perfectly center an item, use justify-content: center and align-items: center on the container. This centers items both horizontally and vertically.