ویژگی flex-wrap در CSS

flex-wrap property

ویژگی flex-wrap در (فلکس باکس) CSS مشخص می کند که عناصر فلکس در یک ردیف جایگیری کنند یا در جای مقتضی شکسته شده و در خطوط بعدی نیز قرار بگیرند.

نحوه نوشتار

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

مقادیر

nowrap​

عناصر فلکس در یک خط قرار می گیرند. این مقدار پیشفرض است.

wrap​

عناصر فلکس در جایی که نیاز باشد در خطوط دیگر قرار می گیرند.

wrap-inverse​

عناصر فلکس در جایی که نیاز باشد در خطوط دیگر قرار می گیرند. ترتیب قرار گیری عناصر از آخر به اول است.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<section>
    <p>flex-wrap: <span>nowrap;</span></p>
    <div class="wrapper1">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    <p>flex-wrap: <span>wrap;</span></p>
    <div class="wrapper2">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    <p>flex-wrap: <span>wrap-reverse;</span></p>
    <div class="wrapper3">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
</section>

css

section {
    width: 450px;
    margin: 10px auto;
    font-family: monospace;
    text-align: center;
}
section > div {
    width: 450px;
    padding: 15px;
    background-color: #e7e7e7;
    display: flex;
}
.wrapper1 {
    flex-wrap: nowrap; 
}
.wrapper2 {
    flex-wrap: wrap; 
}
.wrapper3 {
    flex-wrap: wrap-reverse; 
}
section div div {
    width: 130px;
    height: 50px;
}
span { color: red; }
.box1 { background-color: pink; }
.box2 { background-color: lightskyblue; }
.box3 { background-color: lightgreen; }
.box4 { background-color: yellow; }
.box5 { background-color: lightseagreen; }

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند. Internet Explorer بصورت نسبی از این ویژگی پشتیبانی می کند.