flex-direction

概要

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
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については 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
The definition of 'flex-direction' in that specification.
Last Call Working Draft 最初の定義

ブラウザ実装状況

機能 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,