תאור המאפיין order


קובע את הסדר של האובייקטים במכולה גמישה.


קוד לדוגמה המציג את המאפיין order


<!DOCTYPE html>
<html>
<head>
    <title>כותרת האתר</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>
<meta charset="utf-8"/>
</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>
</body>
</html>

תמיכה בדפדפנים למאפיין order


chrome logo
explorer logo
edge logo
firefox logo
safari logo
opera logo
29.0
11.0
כן
28.0
9.0
17.0

המספר מתחת לאייקון של הדפדפנים מציין את הגרסה הראשונה שבה נתמכת המאפיין.


גרסת css למאפיין order


3


תכונות למאפיין order


inheritנעדכן בקרוב את תאור הערך.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
unsetנעדכן בקרוב את תאור הערך.

השאר תגובה