CSS flex-direction 属性

定義と使用法

flex-direction属性はエラストイックアイテムの方向を定義します。

注釈：要素がエラストイックアイテムでない場合、flex属性は無効です。

も参照してください：

CSS タイプ：CSS フレックスボックス

CSS リファレンスマニュアル：flex 属性

CSS リファレンスマニュアル：flex-basis 属性

CSS リファレンスマニュアル：flex-flow 属性

CSS リファレンスマニュアル：flex-grow 属性

CSS リファレンスマニュアル：flex-shrink 属性

CSS リファレンスマニュアル：flex-wrap 属性

HTML DOM リファレンスマニュアル：flexDirection 属性

例

<div>要素内のエラストイックアイテムの方向を逆の順序で設定します：

div {
  display: flex;
  flex-direction: row-reverse; 
}

自分で試してみる

CSS 语法

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性値

値 説明
row デフォルト値。行として、水平にエラストイックアイテムを表示します。
row-reverse 等しい行ですが、方向が逆です。
column 列として、垂直にエラストイックアイテムを表示します。
column-reverse 等しい列ですが、方向が逆です。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性を親要素から継承します。参照してください： inherit。

技術的詳細

デフォルト値： row
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.flexDirection="column-reverse"

さらに例

flex-direction とメディアクエリを組み合わせて、異なるスクリーンサイズ/デバイスに対して異なるレイアウトを作成します：

.flex-container {
  display: flex;
  flex-direction: row;
}
/* レスポンシブレイアウト - 2列レイアウト（50％）ではなく、1列レイアウト（100％）を作成します */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

自分で試してみる

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

前缀を使用する最初のバージョンの数字は -webkit- または -moz- で示されます。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0