Flexbox Intro

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn to quickly build one-dimensional layouts

Flexbox is the best layout system for aligning and distributing items along a single row or column. It's used constantly in navigation bars, button groups, card rows, form controls, and centering things. Once you get Flexbox, you can solve a ton of "I just want this box centered" type problems.

css

.center-box {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 300px;
}

You should see

The item inside the container will sit dead-center, both horizontally and vertically.

Tip

Once you understand the main axis and cross axis in Flexbox, justify-content and align-items won't feel confusing anymore.