例
柔軟性のある項目は逆の順序で表示させる、とnecesarry場合ラップ：
div {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
} »それを自分で試してみてください 定義と使用法
フレックス流動性は、フレックス方向とフレックスラッププロパティの短縮形プロパティです。
フレックスdirectionプロパティは、柔軟なアイテムの方向を指定します。
フレックスラッププロパティは、柔軟なアイテムがラップすべきか否かを指定します。
Note:要素は柔軟性の項目でない場合は、フレックスフローのプロパティは効果がありません。
| デフォルト値： | row nowrap |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.flexFlow="column nowrap" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSSの構文
flex-flow:flex-directionflex-wrap |initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| flex-direction | 可能な値： 行 行リバース カラム 列の逆 初期 受け継ぎます デフォルト値は"row" 。 柔軟性のあるアイテムの方向の指定 | それを再生します» |
| flex-wrap | 可能な値： nowrapを ラップ ラップ逆 初期 受け継ぎます デフォルト値は"nowrap" 。 柔軟性のあるアイテムがラップすべきか否かを指定します | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス： flex property
CSSリファレンス： flex-direction property
CSSリファレンス： flex-wrap property
CSSリファレンス： flex-basis property
CSSリファレンス： flex-grow property
CSSリファレンス： flex-shrink property
HTML DOMリファレンス： flexFlow property