最近、CSSでのレイアウトはFlexbox（フレックスボックス）が主流になってきました。
様々なレイアウトが数行のコードで実装できてとても便利なのですが、プロパティが多いため、すべてを覚えきれていないという方も多いのではないでしょうか。
今回は、Flexboxの主要プロパティの1つである、「flex-direction」について説明していきます。
※各コード下にある「コードをコピー」ボタンをクリックすると、ベンダープレフィックス付きのコードがクリップボードにコピーされるようになっています。
flex-directionプロパティで何ができるの？
flex-direction（フレックスディレクション）とは、「要素の配置方向を指定する」プロパティです。
- 左から右へ（初期値）
- 右から左へ
- 上から下へ
- 下から上へ
など、要素が並ぶ方向を指定することができます。
HTMLを変更することなく昇順降順などを切り替えることができて、とても便利なプロパティです。
構文
flex-direction: 値;値は、後述する「指定できる値」を参照してください。
「flex-direction」は、フレックスコンテナに指定するプロパティです。
「display: flex;」を指定した要素に、「flex-direction」も指定します。
記述例
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}指定できる値
| row（初期値） | 主軸は水平。 要素の配置方向が左から右（→）に配置されます。 |
|---|---|
| row-reverse | 主軸は水平。 「row」の逆で、要素の配置方向が右から左（←）に配置されます。 |
| column | 主軸は水直。 要素の配置方向が上から下（↓）に配置されます。 |
| column-reverse | 主軸は水直。 「column」の逆で、要素の配置方向が下から上（↑）に配置されます。 |
サンプルコード
row（左から右）
CSS
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;デモ
要素の並ぶ方向が左から右（→）になります。
「row」は初期値なので、何も指定していない場合と同じ挙動です。
row-reverse（右から左）
CSS
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;デモ
要素の並ぶ方向が右から左（←）になります。
「row」の「reverse」なので、「row」とは逆方向の配置になります。
実践的な使い方は、下記の記事でご紹介しています。
column（上から下）
CSS
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;デモ
要素の並ぶ方向が上から下（↓）になります。
「row」「row-reverse」が水平方向の軸なのに対して、「column」は垂直方向に軸に変わります。
column-reverse（下から上）
CSS
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;デモ
要素の並ぶ方向が下から上（↑）になります。
「column」の「reverse」なので、「column」とは逆方向の配置になります。
Flexboxの各プロパティのベンダープレフィックスについては、下記の記事でまとめてあります。
まとめ
Flexboxのプロパティは種類が多くて覚えきれないですよね。
でも、どれも実用性があり、役に立つプロパティが多く存在します。
「flex-direction」をはじめ、他にも便利なプロパティが色々あるので、順次ご紹介しようと思います。
