CSS Flexbox: The Complete Beginner Guide

If you’ve ever struggled to center a div or align items in a row, Flexbox is about to become your best friend.

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout method designed for arranging items in a single direction — either a row or a column. Before Flexbox, developers used floats and positioning hacks. Flexbox makes layout simple and predictable.

Getting started

To use Flexbox, set display: flex on a container:

.container {
  display: flex;
}

That’s it. The direct children of .container are now flex items and will line up in a row by default.

The two axes

Flexbox works along two axes:

• Main axis — the direction items flow (horizontal by default)
• Cross axis — perpendicular to the main axis (vertical by default)

Understanding these axes is the key to mastering Flexbox.

Essential properties

flex-direction

Controls which direction items flow:

.container {
  display: flex;
  flex-direction: row; /* default — left to right */
  flex-direction: column; /* top to bottom */
  flex-direction: row-reverse; /* right to left */
  flex-direction: column-reverse; /* bottom to top */
}

justify-content

Aligns items along the main axis:

.container {
  display: flex;
  justify-content: flex-start; /* pack to the start */
  justify-content: center; /* center them */
  justify-content: flex-end; /* pack to the end */
  justify-content: space-between; /* equal space between */
  justify-content: space-around; /* equal space around */
  justify-content: space-evenly; /* truly equal spacing */
}

align-items

Aligns items along the cross axis:

.container {
  display: flex;
  align-items: stretch; /* default — fill the container height */
  align-items: flex-start; /* align to top */
  align-items: center; /* center vertically */
  align-items: flex-end; /* align to bottom */
}

The classic center trick

Centering something both horizontally and vertically used to be a nightmare. With Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Done. That’s it.

flex-wrap

By default, flex items try to fit on one line. Use flex-wrap to let them wrap:

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

The gap property adds spacing between items without needing margins.

Item properties

flex-grow

Controls how much an item grows relative to siblings:

.item {
  flex-grow: 1; /* take up equal remaining space */
}

.item-double {
  flex-grow: 2; /* take twice as much remaining space */
}

flex-shrink and flex-basis

.item {
  flex-basis: 200px; /* ideal starting size */
  flex-shrink: 0; /* don't shrink below basis */
}

The flex shorthand

.item {
  flex: 1; /* grow: 1, shrink: 1, basis: 0% */
  flex: 0 0 200px; /* don't grow, don't shrink, 200px wide */
}

When to use Flexbox vs Grid

• Flexbox — one-dimensional layouts (a row OR a column)
• CSS Grid — two-dimensional layouts (rows AND columns)

Use Flexbox for navbars, card rows, centering content, and aligning items. Use Grid for full page layouts and complex arrangements.

Practice makes it stick

Reading about Flexbox helps, but you need to build with it to really learn. Hyper Sheets has dedicated Flexbox exercises and games where you manipulate flex properties and see results in real time.

The best way to learn layout is by laying things out.