آموزش ترازبندی محتوا (Justify) در FlexBox

گاهی اوقات، پس از قرار دادن آیتم ها در یک عنصر دربرگیرنده (contanier)، همانند تصویر زیر، فضایی اضافی و خالی در سمت چپ یا راست آیتم ها به وجود می آید :

با استفاده از خاصیت justify-content در FlexBox می توانید نحوه قرارگیری و ترازبندی آیتم ها در یک عنصر بزرگتر را تعیین و تنظیم نمایید. همچنین در مواردی که عرض عنصر دربرگیرنده، کمتر از عرض عناصر درون آن بوده و حالت overflow پیدا می کند، می توانید چینش عناصر به صورت افقی و عمودی را نیز تغییر دهید.
ساختار کلی استفاده از خاصیت justify-content در FlexBox به صورت زیر است :

syntax
کد	justify-content: flex-start \| flex-end \| center \| space-between \| space-around\| space-evenly;

خاصیت justify-Content می تواند یکی از مقادیر زیر را دریافت کند :

مقدار flex-start : در این حالت، آیتم های درون عنصر دربرگیرنده (contanier) از سمت چپ (نقطه شروع) مرتب شده و فضای خالی، در صورت وجود، در سمت راست و انتها قرار می گیرد.
مقدار flex-end : در این حالت، آیتم های درون عنصر دربرگیرنده (contanier) از سمت راست (نقطه پایان) مرتب شده و در صورت وجود فضای خالی، در سمت چپ و شروع قرار می گیرد.
Center : در این حالت آیتم های درون عنصر دربرگیرنده (contanier) از وسط مرتب شده و چنانچه فضای خالی، وجود داشته باشد، به طور مساوی در دو طرف راست و چپ، قرار می گیرد.
space-between : در این حالت اگر فضای خالی در عنصر دربرگیرنده (Continer) وجود داشته باشد، به طور مساوی تقسیم شده و بین آیتم های درون آن قرار می گیرد.
Space-around: در این حالت نیز اگر فضای خالی در عنصر دربرگیرنده (Continer) وجود داشته باشد، به صورت مساوی بین آیتم های درون آن و لبه های سمت راست و چپ، توزیع می شود.

در ادامه، تمامی حالت های مختلف فوق را به همراه مثال های عملی، نشان خواهیم داد.

آموزش کاربرد مقدار flex-start در flex Box

اگر مقدار flex-start برای خاصیت Justify-content تعیین شود، عناصر موجود در عنصر دربرگیرنده (contanier) از نقطه شروع آن (در حالت پیش فرض سمت چپ) مرتب شده و فضای خالی در انتها و سمت راست، قرار خواهد گرفت. همانند عکس زیر :

مثال عملی :

در کد مثال زیر، مقدار flex-start را برای خاصیت justify-content عنصر دربرگیرنده div با کلاس contanier تعیین کرده ایم.
شش جعبه (Box) درون div اصلی، از سمت چپ مرتب شده و فضای خالی در سمت راست، قرار گرفته است :

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;
       }

       .contanier {
           display: flex;
           border: 3px solid black;
           justify-content: flex-start;
       }
   </style>
   
   <body>
      <div class = "contanier">
         <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>

خروجی

آموزش کاربرد مقدار flex-end در FlexBox

اگر مقدار flex-end برای خاصیت Justify-content تعیین شود، عناصر موجود در عنصر دربرگیرنده (contanier) از نقطه پایان (پیش فرض سمت راست) مرتب شده و فضای خالی در ابتدا و سمت چپ، قرار خواهد گرفت. همانند عکس زیر :

مثال عملی :

در کد مثال زیر، مقدار flex-end را برای خاصیت justify-context عنصر دربرگیرنده div با کلاس contanier تعیین کرده ایم.
شش جعبه (Box) درون div اصلی، از سمت چپ مرتب شده و فضای خالی در سمت راست، قرار گرفته است :

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;
       }

       .contanier {
           display: flex;
           border: 3px solid black;
           justify-content: flex-end;
       }
   </style>
   
   <body>
      <div class = "contanier">
         <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>

خروجی

آموزش کاربرد مقدار Center در FlexBox

اگر مقدار Centerرا برای خاصیت justify تعیین کنید، آیتم های درون عنصر دربرگیرنده (contanier)، از مرکز آن مرتب شده و فضای خالی به صورت مساوی، بین آیتم ها تقسیم می شود، همانند عکس زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار Center را برای خاصیت justify-content عنصر div با کلاس contanier تعیین کرده ایم.
همانطور که در خروجی مشاهده می کنید، شش جعبه (Box) موجود در تگ div از مرکز آن مرتب شد و فضای خالی، به صورت مساوی بین آن ها تقسیم شده است :

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;
       }

       .contanier {
           display: flex;
           border: 3px solid black;
           justify-content: center;
       }
   </style>
   
   <body>
      <div class = "contanier">
         <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>

خروجی

آموزش کاربرد مقدار space-between در FlexBox

اگر مقدار Space-between برای خاصیت justify-content تعیین شود، آیتم های موجود در عنصر دربرگیرنده (contanier) از مرکز مرتب شده و فضای خالی به صورت مساوی بین آن ها تقسیم خواهد شد. در این حالت بین آیتم ها و دو لبه طرفین عنصر دربرگیرنده، فضای خالی وجود نخواهد داشت، همانند عکس زیر :

مثال : در کد مثال عملی زیر، مقدار space-between برای خاصیت justify-content عنصر div، کلاس contanier تعیین شده است.
همانطور که در خروجی مثال مشاهده می کنید، شش جعبه (Box) موجود در تگ div از مرکز مرتب شده و به طرفین چسبیده اند. همچنین فضای خالی به صورت مساوی بین آن ها تقسیم شده است :

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;
       }

       .contanier {
           display: flex;
           border: 3px solid black;
           justify-content: space-between;
       }
   </style>
   
   <body>
      <div class = "contanier">
         <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>

خروجی

آموزش کاربرد مقدار space-around در FlexBox

اگر مقدار space-around برای خاصیت justify-content تعیین شود، فضای خالی در عنصر دربرگیرنده (contanier)، به صورت مساوی بین آیتم های درون آن و لبه های ابتدایی و انتهایی، تقسیم می شود. همانند تصویر زیر :

مثال : در کد مثال عملی زیر، مقدار خاصیت space-around برای عنصر دربرگیرنده اصلی (تگ div با کلاس contanier) تعیین شده است.
همانطور که در خروجی مشاهده می کنید، فضای خالی بین شش جعبه (Box) درون تگ div و همچنین لبه های سمت راست و چپ، به صورت مساوی تقسیم شده است :

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;
      }
      .contanier{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>
   
   <body>
      <div class = "contanier">
         <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>

خروجی