CSS3 Verwendung und Beispiel des order-Attributs

Der order CSS-Attribut bestimmt die Anzeigereihenfolge und das Layout der Flex-Elemente im Flex-Container. Die Elemente werden in aufsteigender Reihenfolge der Werte sortiert. Elemente mit gleicher Reihenfolgewert werden in der Reihenfolge ihrer im Quellcode angegebenen Position ausgerichtet.

Die folgende Tabelle enthält die Anwendungsbeschreibungen und Versionshistorie dieser Eigenschaft sowie ihre Verwendung in JavaScript-Skripten.

order Syntax

Die Syntax dieser Eigenschaft ist wie folgt:

order:　integer　|　initial　|　inherit

Die folgenden Beispiele zeigen, wie die order-Eigenschaft verwendet wird.

.flex-container　{
　　　　border:　2px　solide　#000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

Eigenschaftswerte

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Browserkompatibilität

Die Kompatibilität der order-Eigenschaft der Browser, die Nummern in der Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

Weitere Informationen

Bitte lesen Sie die folgenden Anleitungen:CSS Schriftarten，CSS Einheiten，CSS Pseudo-Elemente。

Verwandte Eigenschaften: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.