flex-direction

概要

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

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

  • 初期値 error:(<s*codes+ids*=s*"initial-flex-direction"[^>]*>)</s*codes+ids*=s*"initial-flex-direction"[^>
  • 適用対象 flex コンテナ
  • 継承 なし
  • メディア visual
  • 計算値 指定値

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

構文

形式構文: row | row-reverse | column | column-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

flex-direction: inherit

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

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 の位置が入れ替わります。

element { 
  flex-direction: row-reverse;
}

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module 勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0) (要設定) [1]
20.0 (20.0)
21.0-webkit 未サポート 12.10 未サポート
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? ? 未サポート 12.10 未サポート

[1] Firefox は単一ラインの flexbox のみサポートしています。flexbox サポートを有効にするには、Firefox 18 および 19 ではユーザが about:config の設定 "layout.css.flexbox.enabled" を true に変更することが必要です。

関連情報

Document Tags and Contributors

Contributors to this page: ethertank, yyss
最終更新者: ethertank,
サイドバーを隠す