display: flex; でflex-containerにしたブロック内でのアイテムの並び順は、flex-directionプロパティで設定します。

HTML記述例

たとえば、下記のようなブロックがあるとします。

<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
</ul>

アイテムが左から右に横並びにする＜初期値＞

アイテムが左から右へ横並びになるのが初期値です。
.flex-itemがfloat: left;であるような動きになります。

プレビュー

• 1
• 2
• 3
• 4

CSS記載例

.flex-container {
  flex-direction: row;
}

アイテムが右から左に横並びにする

アイテムが右から左へ横並びになります。
.flex-itemがfloat: right;であるような動きになります。

プレビュー

• 1
• 2
• 3
• 4

CSS記載例

.flex-container {
  flex-direction: row-reverse;
}

アイテムが上から下に縦並びにする

アイテムが上から下へ縦並びになります。

プレビュー

• 1
• 2
• 3
• 4

CSS記載例

.flex-container {
  flex-direction: column;
}

アイテムが下から上に縦並びにする

アイテムが下から上へ縦並びになります。

プレビュー

• 1
• 2
• 3
• 4

CSS記載例

.flex-container {
  flex-direction: column-reverse;
}

まとめ

display: flex;ではfloat: left;やfloat: right;やtableレイアウトでは実現の難しかった並び方を簡単に実現できるようになりました。
このプロパティについても積極的に使っていきたいと思います。