תאור המאפיין flex-flow


בקרוב נעדכן את המידע אודות מאפיין ה-css.


קוד לדוגמה המציג את המאפיין flex-flow


<!DOCTYPE html>
<html>
<head>
    <title>כותרת האתר</title>
<style>
#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row-reverse wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
<meta charset="utf-8"/>
</head>
<body>
    <div id="main">
        <div style="background-color:coral; ">A</div>
        <div style="background-color:lightblue; ">B</div>
        <div style="background-color:khaki; ">C</div>
        <div style="background-color:pink; ">D</div>
        <div style="background-color:lightgrey; ">E</div>
        <div style="background-color:lightgreen; ">F</div>
    </div>
</body>
</html>

תמיכה בדפדפנים למאפיין flex-flow


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

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


גרסת css למאפיין flex-flow


3


תכונות למאפיין flex-flow


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

השאר תגובה