ویژگی order در فلکس باکس

ویژگی order

ویژگی order در CSS Flexbox به شما این امکان را می‌دهد که ترتیب قرارگیری عناصر در یک کانتینر فلکسی (flex container) را تغییر دهید. به عبارت دیگر، شما می‌توانید با استفاده از این ویژگی، ترتیب نمایش عناصر را در یک خط یا ستون به دلخواه خود تنظیم کنید، بدون اینکه نیاز به تغییر در HTML داشته باشید.

نحوه کارکرد ویژگی order

مقدار پیش‌فرض order برای تمام عناصر در یک کانتینر فلکسی 0 است. این بدان معناست که تمام عناصر به ترتیب ورودشان به HTML نمایش داده می‌شوند.

تنظیم مقدار order

می‌توانید مقدار order را برای هر عنصر فلکسی به عددی مثبت یا منفی تنظیم کنید:

عناصری با مقدار order کمتر اولویت بیشتری دارند و در ابتدا نمایش داده می‌شوند.
عناصری با مقدار order بالاتر بعد از عناصر با مقدار پایین‌تر نشان داده می‌شوند.

نحوه استفاده از order

html

                                    .box-1 {
      background-color:  #e76f51;
      order: -1;
    }
    .box-2 {
      background-color:  #f4a261;
      order: 0;
    }
    .box-3 {
      background-color:  #e9c46a;
      order: 0;
    }
    .box-4 {
      background-color:  #2a9d8f;
      order: 2;
    }

    

order=-1

order=0

order=2

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

html

                                <!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;
      border: 2px solid #6b9080;
      width: 100%;
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
      order: -1;
    }
    .box-2 {
      background-color:  #f4a261;
      order: 0;
    }
    .box-3 {
      background-color:  #e9c46a;
      order: 0;
    }
    .box-4 {
      background-color:  #2a9d8f;
      order: 2;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> order=-1 </div>
     <div class="box box-2"> order=0 </div>
     <div class="box box-3"> order=0 </div>
     <div class="box box-4"> order=2 </div>
  </div>
</body>
</html>

    

align-self

flex-start

align-self

    .box-2 {
      background-color:  #f4a261;
      align-self: flex-start;
    }

item-1

item-2

item-3

item-4

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

     
        <!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;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
      align-self: flex-start;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </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>
</body>
</html>

    

flex-end

align-end

    .box-2 {
      background-color:  #f4a261;
      align-self: flex-end;
    }

item-1

item-2

item-3

item-4

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

     
        <!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;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
      align-self: flex-end;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </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>
</body>
</html>

    

stretch

    .box-2 {
      background-color:  #f4a261;
      align-self: stretch;
    }

item-1

item-2

item-3

item-4

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

     
        <!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;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
      align-self: stretch;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </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>
</body>
</html>

    

flex-grow

    .box-2 {
      background-color:  #f4a261;
      flex-grow: 1;
    }

item-1

item-2

item-3

item-4

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

     
        <!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;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
      flex-grow: 1;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </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>
</body>
</html>

    

flex-shrink

    .box-2 {
      background-color:  #f4a261;
      flex-shrink: 0;
    }

item-1

item-2

item-3

item-4

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

     
        <!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;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
      flex-shrink: 0;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </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>
</body>
</html>

    

flex-basis

    .box-1 {
      background-color:  #e76f51;
      flex-basis: 50px;
    }
    .box-2 {
      background-color:  #f4a261;
      flex-basis: 100px;
    }
    .box-3 {
      background-color:  #e9c46a;
      flex-basis: 150px;
    }
    .box-4 {
      background-color:  #2a9d8f;
      flex-basis: 200px;
    }

50px

100px

150px

200px

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

     
        <!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;
    }
    .box {
      padding: 15px;
      font-size: 15px;
      text-align: center;
    }
    .box-1 {
      background-color:  #e76f51;
      flex-basis: 50px;
    }
    .box-2 {
      background-color:  #f4a261;
      flex-basis: 100px;
    }
    .box-3 {
      background-color:  #e9c46a;
      flex-basis: 150px;
    }
    .box-4 {
      background-color:  #2a9d8f;
      flex-basis: 200px;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 50px </div>
     <div class="box box-2"> 100px </div>
     <div class="box box-3"> 150px </div>
     <div class="box box-4"> 200px </div>
  </div>
</body>
</html>

    

    .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 25%;
    }

25%

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

     
        <!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;
    }
    .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 25%;
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 25% </div>
     <div class="box box-2"> 25% </div>
     <div class="box box-3"> 25% </div>
     <div class="box box-4"> 25% </div>
  </div>
</body>
</html>

    

    .container {
      display: flex;
      justify-content: space-between;
      border: 2px solid #6b9080;
    }
            .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(25% - 1rem);
    }

25%

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

     
        <!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;
      justify-content: space-between;
      border: 2px solid #6b9080;
    }
    .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(25% - 1rem);
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 25% </div>
     <div class="box box-2"> 25% </div>
     <div class="box box-3"> 25% </div>
     <div class="box box-4"> 25% </div>
  </div>
</body>
</html>

    

    .container {
      display: flex;
      justify-content: space-around;
      border: 2px solid #6b9080;
    }
            .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(25% - 1rem);
    }

25%

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

     
        <!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;
      justify-content: space-around;
      border: 2px solid #6b9080;
    }
    .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(25% - 1rem);
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 25% </div>
     <div class="box box-2"> 25% </div>
     <div class="box box-3"> 25% </div>
     <div class="box box-4"> 25% </div>
  </div>
</body>
</html>

    

    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem 0;
      border: 2px solid #6b9080;
    }
            .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(50% - 1rem);
    }

50%

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

     
        <!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;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem 0;
      border: 2px solid #6b9080;
    }
    .box {
      font-size: 15px;
      text-align: center;
      flex: 0 0 calc(50% - 1rem);
    }
    .box-1 {
      background-color:  #e76f51;
    }
    .box-2 {
      background-color:  #f4a261;
    }
    .box-3 {
      background-color:  #e9c46a;
    }
    .box-4 {
      background-color:  #2a9d8f;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 50% </div>
     <div class="box box-2"> 50% </div>
     <div class="box box-3"> 50% </div>
     <div class="box box-4"> 50% </div>
  </div>
</body>
</html>

    

❮ قبلی بعدی ❯