آموزش تعیین انعطاف پذیری آیتم ها (Flexibility) در FlexBox

آموزش کار با خاصیت flex-basis در FlexBox:

قبل از اینکه فضا در عنصر دربرگیرنده (container) یا کل صفحه بین آیتم ها تقسیم شود، می توانید از خاصیت flex-basis برای تعیین اندازه پیش فرض هر آیتم، استفاده کنید.
مثال عملی : در کد مثال عملی زیر، نحوه استفاده از خاصیت flex-basis را در عمل نشان داده ایم.
در این کد، 3 جعبه (Box) در عنصر دربرگیرنده (تگ Div با کلاس container) تعریف کرده ایم که توسط خاصیت flex-basis، اندازه پیش فرض 150 پیکسل برای آن ها معین شده است:

syntax

کد

<!doctype html>

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

       .box1 {
           background: green;
           flex-basis: 150px;
       }

       .box2 {
           background: blue;
           flex-basis: 150px;
       }

       .box3 {
           background: red;
           flex-basis: 150px;
       }

       .container {
           display: flex;
           height: 100vh;
           align-items: flex-start;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

خروجی

آموزش تعیین انعطاف پذیری آیتم ها (Flexibility) در FlexBox

آموزش کار با خاصیت flex-grow در FlexBox:

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

syntax

کد

<!doctype html>

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

       .box1 {
           background: green;
           flex-grow: 10;
           flex-basis: 100px;
       }

       .box2 {
           background: blue;
           flex-grow: 1;
           flex-basis: 100px;
       }

       .box3 {
           background: red;
           flex-grow: 1;
           flex-basis: 100px;
       }

       .container {
           display: flex;
           height: 100vh;
           align-items: flex-start;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

خروجی

آموزش کار با خاصیت flex-shrink در FlexBox:

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

syntax

کد

<!doctype html>

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

       .box1 {
           background: green;
           flex-grow: 10;
           flex-basis: 100px;
       }

       .box2 {
           background: blue;
           flex-grow: 1;
           flex-basis: 100px;
       }

       .box3 {
           background: red;
           flex-grow: 1;
           flex-basis: 100px;
       }

       .container {
           display: flex;
           height: 100vh;
           align-items: flex-start;
       }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

خروجی

آموزش کار با خاصیت flex در FlexBox:

می توانید تمامی 3 خاصیت توضیح داده شده این درس را به صورت خلاصه در خاصیت flex تعیین نمایید.
ساختار کلی استفاده از خاصیت flex به صورت زیر است:

syntax
کد	.item { flex: none \| [ <'flex-grow'> <'flex-shrink'>? \|\| <'flex-basis'> ] }