flex-flow CSS プロパティとは
トピック：フレックス方向およびフレックスラップの個々のプロパティを一度に設定するための短縮タイププロパティです。、事ができる
プロパティ flex-flow
基本 書式：セレクタ {flex-flow:値;}
実例 コード 1
フレキシブルアイテムを逆順に表示し、必要に応じてラップします。サンプル コードを試す div {
display: -webkit-flex;
-webkit-flex-flow: row-reverse wrap;
display: flex;
flex-flow: row-reverse wrap;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | flex containers |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.flexFlow="funWebref" |
|---|
| 正規順序 : | 形式文法における値の出現順 |
|---|
| CSSの構文 | flex-flow: flex-direction flex-wrap | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
flex-direction | フレックスアイテムをフレックスコンテナに配置する方法を指定する |
flex-wrap | フレキシブルアイテムをラップするかどうかを指定する |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| flex-flow | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯12 | フルサポート◯28 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯9 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| flex-flow | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | 不明 | 不明 | フルサポート◯あり | フルサポート◯28 | フルサポート◯12.1 | フルサポート◯9.2 | 不明 |
|---|
CSS flex-flow | CSS プロパティ 値| 意味 使い方 実例 – WebRef