flex-flow property
ویژگی کوتاه نویسی flex-flow
در (فلکس باکس) CSS، مقادیر ویژگی های flex-direction
و flex-wrap
را مشخص می کند.
نحوه نوشتار
/* flexd-direction مقادیر مرتبط با */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flexd-wrap مقادیر مرتبط با */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flexd-direction و flexd-wrap مقادیر مرتبط با */ flex-flow: row nowrap; flex-flow: row wrap; flex-flow: column nowrap; flex-flow: column wrap; flex-flow: flex-direction flex-wrap;
مقادیر
مقادیر مربوط به ویژگی flex-direction
- row
- row-reverse
- column
- column-reverse
مقادیر مربوط به ویژگی flex-wrap
- nowrap
- wrap
- wrap-reverse
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div class="wrapper"> <p>flex-direction: <span>row;</span></p> <section class="row"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </section> </div> <div class="wrapper"> <p>flex-direction: <span>row-reverse;</span></p> <section class="row-reverse"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </section> </div> <div class="wrapper"> <p>flex-direction: <span>column;</span></p> <section class="column"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </section> </div> <div class="wrapper"> <p>flex-direction: <span>column-reverse;</span></p> <section class="column-reverse"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </section> </div>
css
body { display: flex; flex-wrap: wrap; justify-content: space-around; } .wrapper { margin: 10px 0; } section { width: 215px; height: 210px; background-color: #dddddd; display: flex; justify-items: flex-start; align-items: flex-start; } section div { width: 60px; height: 60px; margin: 5px; } p { font-family: consolas; font-size: 0.85em; } span { color: red; } .row-nowrap { flex-flow: row nowrap; } .row-wrap{ flex-flow: row wrap; } .column-nowrap { flex-flow: column nowrap; } .column-wrap { flex-flow: column wrap; } .box1 { background-color: lightgreen; } .box2 { background-color: lightsalmon; } .box3 { background-color: yellow; } .box4 { background-color: lightskyblue; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.