ویژگی flex-flow در CSS

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 پشتیبانی می کنند.