フレキシブルフレキシブルボックスモデルのCSS順序属性-CSSチュートリアル-php.cn

フレキシブルフレキシブルボックスモデルのCSS順序属性

高洛峰

リリース： 2017-02-23 09:49:22

オリジナル

2050 人が閲覧しました

インスタンス

フレックスボックスオブジェクト要素の順序を設定します:

p#myRedp注文 :2;}
p
#
myBluep {注文:4;}
p
#
myGreenp {注文: 3;}
p

myPinkp {注文:1;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 order 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。</p>

</body>
</html>

ログイン後にコピー

効果プレビュー

ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

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

28.09.017.0

定義と使用法

order プロパティフレックスボックスモデルオブジェクトの子要素が表示される順序を設定または取得します。。

注: 要素がフレックスボックスオブジェクトの要素ではない場合、order 属性は効果がありません。

プロパティ
order	29.0 21.0 -webkit-	11.0	18.0 -moz-	6.1 -webkit-

デフォルト:	0
継承:	いいえ
アニメーション化可能:	はい、個別のプロパティを参照。 CSS3アニメーションのプロパティ、CSS3アニメーションの例を参照してください。効果プレビュー
バージョン:	CSS3
JavaScript 構文:	object.style.order="2" 効果プレビュー

CSS構文

順序: 番号|初期|継承;

プロパティ値

値	説明
番号	デフォルト値は0です。柔軟なプロジェクトの順序を指定します。
initial	このプロパティをデフォルト値に設定します。イニシャルを参照してください。
inherit	このプロパティを親要素から継承します。「継承」を参照してください。

Flexible フレキシブルボックスモデルの CSS 順序属性の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。