order CSS プロパティとは
トピック：フレックスの項目が表示され、flex コンテナ 内にレイアウトされる順序を指定する、ことができる 。エレメントは、オーダー値の昇順でレイアウトする 同じ順序値を持つ要素は、ソースコードに表示される順序で配置する
プロパティ order
実例 コード 1
flex アイテム の順序を設定するサンプル コードを試す
#Red {-webkit-order: 2;}
divBlue {-webkit-order: 4;}
#Blue {-webkit-order: 3;}
#Pink {-webkit-order: 1;}
#Red {order: 2;}
#Green {order: 4;}
#Green {order: 3;}
#Pink {order: 1;}
プロパティ 定義と使用法
| デフォルト値・初期値 : | 0 |
|---|
| 適用対象 : | flex items と absolutely-positionedされた flex container |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | integer （整数） |
|---|
| JavaScript 構文 | object.style.order="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | order: number | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
integer | フレキシブルアイテムの順序を指定する デフォルト値は0です。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| order | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯12 | フルサポート◯20 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯9 |
|---|
| Absolutely-positioned flex children | フルサポート◯あり | フルサポート◯12 | サポートなし✖ | フルサポート◯10 | フルサポート◯12.1 | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| order | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | 不明 | 不明 | フルサポート◯あり | フルサポート◯20 | フルサポート◯12.1 | フルサポート◯9 | 不明 |
|---|
| Absolutely-positioned flex children | 不明 | 不明 | 不明 | サポートなし✖ | フルサポート◯12.1 | フルサポート◯あり | 不明 |
|---|
CSS order | CSS プロパティ 値| 意味 使い方 実例 – WebRef