CSSリファレンスマニュアル

CSS@ルール（RULES）

CSS属性全書

CSS3 flex-grow 属性 CSS3 flex-direction 属性

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

flex-flow CSS属性は、同時に設定するために使用されます。flex-directionおよびflex-wrap各属性のショートカット属性。

以下のテーブルは、この属性の使用方法とバージョンハイストリと、JavaScriptスクリプトでの使用構文を説明しています。

デフォルト値：	row nowrap; すべての属性を表示
適用：	フレックスコンテナ
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.flexFlow="column nowrap"

flex-flowの使用構文

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

flex-flow: [ flex-direction flex-wrap ] | initial | inherit

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

例

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

テストしてみる‹/›

属性値

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

値	説明
flex-direction	柔軟なアイテムが柔軟なコンテナ内に配置される方法を指定します。
flex-wrap	灵活なアイテムが行を割り切ったり、列を割り切るかどうかを指定します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを適用します。-flowの属性値。

ブラウザの互換性

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

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

さらに詳しく

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

CSS3 flex-grow 属性 CSS3 flex-direction 属性