Flexbox

Flexbox is a layout model that allows you to design a one-dimensional layout easily.

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

+-----------------------------+
|1                            |
+-----------------------------+
|2                            |
+-----------------------------+
|3                            |
+-----------------------------+

Flexbox is horizontal by default, use flex-direction: column; to layout vertically.

.container {
  display: flex;
  height: 5em;
}

+---------+---------+---------+
|1        |2        |3        |
+---------+---------+---------+
|                             |
|                             |
+-----------------------------+

justify-content controls how the children is distributed on the main axis(horizontal):

.container {
  display: flex;
  height: 5em;
  justify-content: flex-end;
}

+----------+------+------+-----+
|          |1     |2     |3    |
|          +------+------+-----+
|                              |
|                              |
+------------------------------+

.container {
  display: flex;
  height: 5em;
  justify-content: space-between;
}

+------+----+------+----+------+
|1     |    |2     |    |3     |
+------+    +------+    +------+
|                              |
|                              |
+------------------------------+

align-items controls how the children is distributed on the cross axis(vertical):

.container {
  display: flex;
  height: 5em;
  justify-content: space-between;
  align-items: center;
}

+------------------------------+
|                              |
+------+    +------+    +------+
|1     |    |2     |    |3     |
+------+    +------+    +------+
|                              |
+------------------------------+

To explore the full power of flexbox, check out Flex Cheatsheet.

There is also a game to test your flexbox skills.