ویژگی flex-wrap در فلکس باکس

ویژگی flex-wrap

wrap در لغت به معنی دور چیزی را گرفتن می باشد

برای قرار دادن آیتم ها (items) در ظرف فلکس (container) به طوری که از ظرف بیرون نزنند از property یا ویژگی flex-wrap به صورت زیر در قسمت container استفاده می گردد.

اگر تعداد آیتم های ظرف فلکس از اندازه کل ظرف فلکس بیشتر باشند، در اینصورت آیتم ها از ظرف بیرون میزنند، با استفاده از همین ویژگی flex-wrap میتوانیم کاری کنیم که آیتم ها شکسته و به سطر جدید بروند.

ویژگی flex-wrap دارای مقادیر (values) زیر می باشد

مقدار پیش فرضِ nowrap
wrap
wrap-revers

مقدارِ nowrap برای ویژگی flex-wrap

حالت nowrap حالت پیش فرض یا default می باشد که باعث می شود اگر آیتمها از ظرفِ فلکس بیرون بزنند شکسته نشوند

 .container {
   display: flex;
   flex-wrap: nowrap;
  }

توجه داشته باشید در این حالت آیتم ها از ظرف فلکس بیرون خواهند زد و شکسته نخواهند شد.

item-1

item-2

item-3

item-4

item-5

item-6

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      flex-wrap: nowrap;
      border: 2px solid #6b9080;
      width: 30%;
      padding: 2%;
      width: 30%;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
    .box-5 {
      background-color:  #34a0a4;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
     <div class="box box-5"> 5 </div>
</body>
</html>

    

مقدار wrap برای ویژگیِ flex-wrap

اگر تعداد آیتم های فلکس از اندازه کل عرض ظرف فلکس بیشتر باشند، در اینصورت آیتم ها از ظرف بیرون میزنند، با استفاده از همین ویژگی flex-wrap میتوانیم کاری کنیم که آیتم ها شکسته و به سطر جدید بروند.

 .container {
   display: flex;
   flex-wrap: wrap;
  }

به طور معمول اگر آیتم های شکل زیر قرار بود به صورت ردیفی داخل ظرف فلکس قرار گیرند، تعدادی از آیتم ها از ظرف بیرون میزدند ولی با ویژگی wrap آیتمها شکسته شده و به ردیفِ پایین رفته اند.

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

item-9

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      border: 2px solid #6b9080;
      width: 30%;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
    .box-5 {
      background-color:  #34a0a4;
    }
    .box-6 {
      background-color:  #52b69a;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
     <div class="box box-5"> 5 </div>
     <div class="box box-6"> 6 </div>
  </div>
</body>
</html>

    

مقدار wrap-reverse برای ویژگیِ flex-wrap

 .container {
   display: flex;
   flex-wrap: wrap-reverse;
  }

به طور معمول اگر آیتم های شکل زیر قرار بود به صورت ردیفی داخل ظرف فلکس قرار گیرند، تعدادی از آیتم ها از ظرف بیرون میزدند ولی با ویژگی wrap-reverse آیتمها شکسته شده و به ردیفِ بالایی رفته اند.

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

item-9

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      flex-wrap: wrap-reverse;
      border: 2px solid #6b9080;
      width: 30%;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
    .box-5 {
      background-color:  #34a0a4;
    }
    .box-6 {
      background-color:  #52b69a;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
     <div class="box box-5"> 5 </div>
     <div class="box box-6"> 6 </div>
  </div>
</body>
</html>

    

❮ قبلی بعدی ❯