flex-direction property
ویژگی flex-direction
در (فلکس باکس) CSS با تعیین محور اصلی، مشخص می کند که عناصر فلکس باکس چگونه جایگیری کنند. (بصورت ردیفی یا ستونی)
نحوه نوشتار
flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;
مقادیر
row
عناصر فلکس بصورت ردیف (افقی) نمایش داده می شود. این مقدار پیشفرض است.
row-reverse
عناصر بصورت ردیف اما از آخر به اول نمایش داده می شوند.
column
عناصر بصورت ستونی (عمودی) نمایش داده می شوند.
column-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: 225px; height: 180px; background-color: #dddddd; display: flex; justify-content: center; align-items: center; } section div { width: 40px; height: 40px; } p { font-family: consolas; font-size: 0.85em; } span { color: red; } .row { flex-direction: row; } .row-reverse { flex-direction: row-reverse; } .column { flex-direction: column; } .column-reverse { flex-direction: column-reverse; } .box1 { background-color: lightgreen; } .box2 { background-color: lightsalmon; } .box3 { background-color: lightskyblue; } .box4 { background-color: yellow; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند. مرورگر Firefox بصورت نسبی از این ویژگی پشتیبانی می کند.