【CSS3】とりあえず気軽にFlexboxを使ってみる ｜ ciao

flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけです。

flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrap: nowrap;

flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。
確かこっちが初期値だったと思いますが、実際の制作現場でこちらを使用することはあまりないのではないでしょうか？

flex-wrap: wrap;

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。
個人的にはこちらが初期値であって欲しかったです。

justify-content: space-between;

flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。

justify-content: space-around;

flexアイテムは全てのアイテムは等間隔に配置されます。

「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。

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

flexアイテムは左から右へ（ltr）水平方向に配置されます。

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

flexアイテムは上から下へ垂直方向に配置されます。

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

flexアイテムは左から右へ（ltr）水平方向に配置されます。

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

flexアイテムは下から上へ垂直方向に配置されます。

「flex-direction」のデフォルト値: row

「row」はデフォルト値なので、「 row-reverse」だけ覚えておきたいですね。