ホームページ > 記事 > ウェブフロントエンド > フレキシブルフレキシブルボックスモデルのCSS順序属性

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

高洛峰オリジナル: 2017-02-23 09:49:222019ブラウズ

インスタンス

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

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 サイトの関連記事に注目してください。

声明：

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

前の記事：CSS の 3 つの基本的な位置決めメカニズム次の記事：CSS の 3 つの基本的な位置決めメカニズム

続きを見る