概要

flex-direction CSS プロパティは、main axis や方向 (normal または reversed) を定義することにより、flex コンテナ内で flex アイテムをどのように配置するかを指定します。

row および row-reverse は、flex コンテナの書字方向に影響されることに注意してください。flex コンテナの dir 属性が ltr である場合は、row は水平方向の軸が左から右へ方向づけられ、また row-reverse は右から左になります。一方、dir 属性が rtl である場合は、row は軸が右から左へ方向づけられ、また row-reverse は左から右になります。

初期値row
適用対象flex containers
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* ライン上にテキストが並ぶ方向 */
flex-direction: row;

/* <row> と同様ですが、逆向き */
flex-direction: row-reverse;

/* 複数行のテキストを積み重ねる方向 */
flex-direction: column;

/* <column> と同様ですが、逆向き */
flex-direction: column-reverse;

/* グローバル値 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

以下の値を指定できます:

row
flex コンテナの main-axis は、書字方向と同じ軸に定義されます。main-start および main-end の位置は、コンテンツの書字方向と同様になります。
row-reverse
row と同様ですが、main-start および main-end の位置が入れ替わります。
column
flex コンテナの main-axis は、block-axis と同じ軸になります。main-start および main-end の位置は、writing-mode における before および after の位置と同じになります。
column-reverse
column と同様ですが、main-start および main-end の位置が入れ替わります。

形式構文

row | row-reverse | column | column-reverse

element { 
  flex-direction: row-reverse;
}

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
flex-direction の定義
勧告候補 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit

10 -ms
11

12.10

7 -webkit

機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? ? 未サポート 12.10

未サポート

[1] Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 layout.css.flexbox.enabledtrue に変更します。

[2] 複数ラインの flexbox は Firefox 28 からサポートしています。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss, fscholz, teoli, ethertank
最終更新者: yyss,