Heim > Artikel > Web-Frontend > CSS-Auftragsattribut des flexiblen flexiblen Boxmodells

CSS-Auftragsattribut des flexiblen flexiblen Boxmodells

高洛峰Original: 2017-02-23 09:49:221947Durchsuche

Instanz

Legen Sie die Reihenfolge der Flexbox-Objektelemente fest:

p#myRedp {Bestellung:2;}
p#myBluep {Bestellung:4;}
p#myGreenp {Bestellung:3;}
p#myPinkp {Bestellung: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>

Effektvorschau

Browser-Unterstützung

Die Zahl in der Tabelle gibt die Versionsnummer des ersten Browsers an, der dieses Attribut unterstützt.

Die Nummer unmittelbar nach -webkit-, -ms- oder -moz- ist die erste Version, die dieses Präfixattribut unterstützt.

属性
order	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Definition und Verwendung

Order-Attribut Legt die Reihenfolge fest oder ruft sie ab, in der untergeordnete Elemente des Flexbox-Modellobjekts angezeigt werden. .

Hinweis: Das order-Attribut hat keine Auswirkung, wenn das Element kein Element des Flexbox-Objekts ist.

默认值：	0
继承：	否
可动画化：	是，参见个别的属性。请参阅 CSS3动画属性、CSS3动画实例。效果预览
版本：	CSS3
JavaScript 语法：	object.style.order="2" 效果预览

CSS-Syntax

Reihenfolge: Nummer|initial|inherit;

Attribut Wert

值	描述
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

Weitere CSS-Bestellattribute des flexiblen flexiblen Boxmodells finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Drei grundlegende Positionierungsmechanismen in CSSNächster Artikel：Drei grundlegende Positionierungsmechanismen in CSS

In Verbindung stehende Artikel

Mehr sehen