آموزش تعیین ترتیب قرار گیری آیتم ها order در FlexBox

آموزش تعیین ترتیب قرار گیری آیتم ها در order FlexBox

از خاصیت flex-order برای تعیین ترتیب قرارگیری آیتم ها در FlexBox استفاده می شود.

مثال عملی :

در کد مثال عملی زیر، نحوه استفاده از خاصیت flex-order را در عمل بررسی کرده ایم. در کد زیر، درون عنصر دربرگیرنده (تگ div با کلاس container) شش جعبه (Box) را به ترتیب مشخص تعریف کرده ایم که ترتیب قرارگیری پیش فرض آن ها از سمت چپ به راست و منطبق با اعداد درون آنهاست.
اما برای جعبه های قرمز و ارغوانی به ترتیب خواص order:1 و order:2 را تعیین کرده ایم که نحوه قرارگیری آیتم ها را به صورت زیر تغییر داده است:

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box {
           font-size: 35px;
           padding: 15px;
       }

       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
           order: 1;
       }

       .box4 {
           background: magenta;
           order: 2;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: rows;
           flex-wrap: wrap;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

خروجی

آموزش تعیین ترتیب قرار گیری آیتم ها در order FlexBoxv

راهنمایی :

از خروجی مثال فوق نتیجه گیری می شود که تعیین order برای یک آیتم، باعث قرارگرفتن آیتم در جهت خلاف چینش پیش فرض آیتم ها و در انتهای عنصر دربرگیرنده می شود.

نحوه استفاده از ترتیب معکوس (order منفی) در FlexBox :

در کد مثال فوق، می توانید برای خاصیت order مقادیر منفی نیز تعیین کنید. همانطور که در خروجی کد مثال تغییر یافته زیر مشاهده می کنید، استفاده از مقدار order منفی، نتیجه ای عکس حالت قبل دارد:

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box {
           font-size: 35px;
           padding: 15px;
       }

       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
           order: -1;
       }

       .box4 {
           background: magenta;
           order: -2;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: row;
           flex-wrap: wrap;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

خروجی