آموزش جهت دهی عناصر صفحه flex direction در FlexBox

آموزش جهت دهی عناصر صفحه در FlexBox

از خاصیت flex direction برای تعیین جهت قرارگیری عناصر یک Container در FlexBox استفاده می شود.
ساختار دستوری خاصیت flex direction به صورت زیر است :

syntax
کد	flex-direction: row \| row-reverse \| column \| column-reverse

خاصیت flex direction می تواند یکی از مقادیر زیر را دریافت کند که به تشریح کاربرد هرکدام پرداخته ایم :

row : در صورت استفاده از مقدار row، عناصر موجود در Container به صورت افقی و از جهت چپ به راست مرتب می شوند.
row-reverse : در صورت استفاده از مقدار row-reverse عناصر موجود در Container به صورت افقی و از راست به چپ مرتب می شوند.
column : در صورت استفاده از مقدار column عناصر موجود در Container به صورت عمودی و از بالا به پایین مرتب می شوند.
column-reverse : در صورت استفاده از مقدار column-reverse عناصر موجود در Container به صورت عمودی و از پایین به بالا مرتب می شوند.

در ادامه، با ارائه چندین مثال عملی، استفاده از خاصیت flex-direction در flexbox را نمایش داده ایم.

آموزش استفاده از خاصیت row در Flex Box

با تعیین مقدار row برای خاصیت direction در Flex Box عناصر موجود در Container به صورت افقی و از چپ به راست، همانند تصویر زیر، مرتب خواهند شد:

مثال عملی :

در کد مثال عملی زیر، یک عنصر div با کلاس Container و شش جعبه (Box) درون آن تعریف کرده ایم. با تعیین مقدار row برای خاصیت flex-direction ، جعبه های درون Container از سمت چپ به راست مرتب شده اند :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: row;
       }
   </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>

خروجی

آموزش استفاده از خاصیت row-reverse در Flex Box

با تعیین مقدار خاصیت flex-direction بر روی row-reverse در Flex Box، عناصر موجود در عنصر در برگیرنده (Container) به صورت افقی و از راست به چپ، همانند تصوی زیر، مرتب خواهند شد :

مثال عملی :

مثال عملی : در کد مثال عملی زیر، مقدار خاصیت flex-direction را بر روی row-reverse قرار داده ایم. بنابراین شش جعبه (Box) موجود در عنصر دربرگیرنده اصلی ، از سمت راست به چپ، مرتب شده اند :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: row-reverse;
       }
   </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>

خروجی

آموزش استفاده از خاصیت column در Flex Box

با تعیین مقدار خاصیت flex-direction بر روی Column در Flex Box، عناصر موجود در عنصر دربرگیرنده (Container)، به صورت عمودی و از بالا به پایین، همانند تصویر زیر، مرتب می شوند :

مثال عملی :

در کد مثال عملی زیر، مقدار خصیت flex-direction را بر روی column قرار داده ایم. همان طور که در خروجی مشاهده می کنید، شش جعبه (Box) درون تگ با کلاس container، به صورت عمودی و از بالا به پایین، مرتب شده اند :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: column;
       }
   </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>

خروجی

آموزش استفاده از خاصیت column-reverse در FlexBox

در صورت تعیین مقدار Column-reverse برای خاصیت flex-direction در flexBox، عناصر موجود در عنصر دربرگیرنده (container) به صورت عمودی و از پایین به بالا مرتب می شوند. همانند عکس زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار خاصیت flex-direction را بر روی column-reverse تعیین کرده ایم. همانطور که مشاهده می کنید، عناصر موجود در تگ <div> با کلاس container، به صورت عمودی و از پایین به بالا مرتب شده اند :

syntax

کد

<!doctype html>

<html lang = "en">
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

       .box {
           font-size: 35px;
           padding: 15px;
       }

       .container {
           display: inline-flex;
           border: 3px solid black;
           flex-direction: column-reverse;
       }
   </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>

خروجی