CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 flex-direction 属性の使用方法と例

flexコンテナの主軸の方向を設定することで、flex-direction CSS属性は、flexコンテナ内でflexアイテムをどのように配置するかを指定します。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプト内での属性の使用構文を示しています。

デフォルト値：	row
適用範囲：	フレックスコンテナ
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript文法：	object.style.flexDirection="row-reverse"

flex-directionの使用文法

この属性の文法は以下の通りです：

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

以下の例では、flexを使用する方法を示しています-direction属性。

例

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display: flex;
　　　　flex-direction: row-reverse;　　　　
}

テストを見て‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
row	flexコンテナのメイン軸は、現在の書き込みモードのインライン軸の方向と同じです、つまりテキスト方向です。
row-reverse	rowと同じですが、軸の始点と終点が逆です。
column	flexコンテナのメイン軸は、現在のテキスト方向のブロック軸（水平書き込みモードでの垂直軸および垂直書き込みモードでの水平軸）の方向と同じです。
column-reverse	列と同じですが、軸の始点と終点が逆です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを適用します-directionの属性値。

ブラウザの互換性

flex-direction属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 18+ ^-moz-、28 Google Chrome 21+ ^-webkit-、29 Internet Explorer 10+ ^-ms-、11 Apple Safari 6。1+ ^-webkit- Opera 12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3多列レイアウト。

関連属性：align-content、align-items、align-self、display、flex、flex-basis、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、min-height、min-width、order。

CSS3 flex-flow 属性 CSS3 flex-basis 属性