ホームページ  >  記事  >  ウェブフロントエンド  >  Flexible フレキシブル ボックス モデルの CSS flex-flow プロパティの詳細な説明

Flexible フレキシブル ボックス モデルの CSS flex-flow プロパティの詳細な説明

高洛峰
高洛峰オリジナル
2017-03-15 10:56:592657ブラウズ


フレックスボックスの要素を逆の順序で表示し、必要に応じて分割します:

  1. display:flex ;

  2. フレックス

    -フロー:-逆ラップ;

効果プレビュー

ブラウザサポート

内の数字

テーブル

は、この属性をサポートする最初のブラウザのバージョン番号を表します。 -webkit-、-ms-、または -moz- の直後の数字は、このプレフィックス属性をサポートする最初のバージョンです。

プロパティflex-flow21.0 -webkit-10.0 -ms-18.0 -moz-6.1 -ウェブキット-

定義と使用法

flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの複合プロパティです。

flex-flow プロパティは、フレックスボックス モデルオブジェクトの子要素の配置を設定または取得するために使用されます。

flex-direction プロパティは、フレックス項目の方向を指定します。

flex-wrap 属性は、フレキシブル項目を行または列に分割するかどうかを指定します。

注: 要素が flexbox オブジェクトの要素でない場合、flex-flow プロパティは効果がありません。

29.0
11.

28.0

9.0

17.0
CSS3 アニメーション バージョン: JavaScript


CSS構文


flex-flow: flex-direction flex-wrap|initial|inherit;

プロパティ値

デフォルト: row nowrap
継承: いいえ
アニメーション化可能: いいえ。 SS3 アニメーションのプロパティ、 の例を参照してください。
CSS3
構文: object.style.flexFlow="column nowrap" 効果プレビュー
value 説明
flex-方向 可能な値:

row
row-reverse
column
column-reverse
initial
inherit

デフォルト値は「row」です。

柔軟なプロジェクトの方向性を指定します。

flex-wrap 可能な値:

nowrap
wrap
wrap-reverse
initial
inherit

デフォルト値は「nowrap」です。

フレキシブル項目を行または列に分割するかどうかを指定します。

initial このプロパティをデフォルト値に設定します。 初期を参照してください。
inherit この属性を親要素から継承します。 継承を参照してください。

以上がFlexible フレキシブル ボックス モデルの CSS flex-flow プロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。