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 بصورت نسبی از این ویژگی پشتیبانی می کند.