Maison > Article > interface Web > Attribut d'ordre CSS du modèle de boîte flexible flexible

Attribut d'ordre CSS du modèle de boîte flexible flexible

高洛峰original: 2017-02-23 09:49:221996parcourir

Instance

Définir l'ordre des éléments de l'objet flexbox :

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

Aperçu de l'effet

Support du navigateur

Le numéro dans le tableau indique le numéro de version du premier navigateur qui prend en charge cet attribut.

Le numéro qui suit immédiatement -webkit-, -ms- ou -moz- est la première version qui prend en charge cet attribut de préfixe.

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

Définition et utilisation

attribut order Définit ou récupère l'ordre dans lequel les éléments enfants de l'objet modèle flexbox apparaissent. .

Remarque : L'attribut order n'a aucun effet si l'élément n'est pas un élément de l'objet flexbox.

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

Syntaxe CSS

ordre : numéro|initial|hériter;

attribut Valeur

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

Pour plus d'attributs de commande CSS du modèle de boîte flexible flexible, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Trois mécanismes de positionnement de base en CSSArticle suivant：Trois mécanismes de positionnement de base en CSS

Articles Liés

Voir plus