CSSフレックスフロープロパティ
例
フレキシブルアイテムを逆の順序で表示し、必要に応じて折り返します。
div {
display: flex;
flex-flow: row-reverse wrap;
}
定義と使用法
プロパティは、次のflex-flow
略記プロパティです。
注:要素が柔軟なアイテムでない場合、flex-flow
プロパティは効果がありません。
デフォルト値: | 行nowrap |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.flexFlow = "column nowrap" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
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-direction flex-wrap|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
flex-direction | Possible values: row row-reverse column column-reverse initial inherit Default value is "row". Specifying the direction of the flexible items |
|
flex-wrap | Possible values: nowrap wrap wrap-reverse initial inherit Default value is "nowrap". Specifying whether the flexible items should wrap or not |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSフレキシブルボックス
CSSリファレンス:flexプロパティ
CSSリファレンス:flex-directionプロパティ
CSSリファレンス:flex-wrapプロパティ
CSSリファレンス:flex-basisプロパティ
CSSリファレンス:flex-growプロパティ
CSSリファレンス:flex-shrinkプロパティ
HTML DOMリファレンス:flexFlowプロパティ