Flexbox

So far, you’ve learned how to size, space, and display elements. But when you want to arrange multiple boxes in a row or column, normal block and inline layouts are very limited.

Flexbox (short for Flexible Box Layout) is a CSS layout system that makes it much easier to control alignment, spacing, and positioning of items. Flexbox alone allows you to make complex UIs with ease.

To use Flexbox, you set a parent element’s display to flex. Then, you use flexbox properties to control how the children behave.

The Flex Container

The parent element that has display: flex is called the flex container. All of its direct children become flex items.

Rules for flex containers:

• Only the direct children are flex items.

• By default, flex items sit in a row.

• You can change direction, alignment, and spacing with flex properties.

Example:

<div class="container"> <!-- Parent -->
  <div class="box" style="background-color: lightblue;">1</div> <!-- child -->
  <div class="box" style="background-color: lightgreen;">2</div> <!-- child -->
  <div class="box" style="background-color: pink;">3</div> <!-- child -->
</div>