Flexbox Introduction

Flexbox Introduction

Flexbox is the modern one-dimensional layout system. It arranges items in a row or a column and makes them flexible.

One axis at a time

Flexbox = "Flexible Box". Think train tracks: items laid out in a line that can grow, shrink, and be spaced out.

The two words

• Flex container: the parent with display: flex.
• Flex items: its direct children.

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

.container {
  display: flex;
}

The children now sit side by side!

Why flexbox?

• Easy centering (main!).
• Auto-distributes space.
• Responsive resizing without floats.
• Vertical centering that 'just works'.

Main axis vs cross axis

• Main axis: the direction flex-direction sets (row or column).
• Cross axis: the other direction.

Alignment uses the axis names:

• justify-content: main axis.
• align-items: cross axis.

TL;DR

• Flex = one-dimensional layout (row or column).
• Container -> child relationship: display: flex.
• main vs cross axis decides which property does what.
• Perfect centering: display:flex + justify-content + align-items.