コーディング

flexbox|flex-directionの意味と具体的な使い方を徹底解説

最近、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」をはじめ、他にも便利なプロパティが色々あるので、順次ご紹介しようと思います。

「Flexbox」の関連記事一覧