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 は左から右になります。

他のプロパティや詳細情報については 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;
}

仕様書

ブラウザ実装状況

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

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

関連情報

• CSS flexible box の利用