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

در حالتی که مقدار خاصیت flex-wrap عنصر دربرگیرنده (Flex-container) برابر wrap است، این عنصر دارای بیش از یک خط (line) خواهد بود.
در مورد فوق، از خاصیت align-content برای ترازبندی و تعیین موقعیت قرارگیری هر خط محتوی در عنصر دربرگیرنده، استفاده می شود.
ساختار کلی استفاده از خاصیت align-content به صورت زیر است :

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

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

center : در این حالت، کلیه خطوط (lines) در مرکز عنصر دربرگیرنده (عمودی)، مرتب می شوند.
flex-start : در این حالت، کلیه خطوط (lines) در نیمه بالایی و ابتدایی عنصر دربرگیرنده قرار می گیرند.
flex-end : در این حالت، کلیه خطوط (lines) در نیمه پایینی و انتهای عنصر دربرگیرنده قرار می گیرند.
stretch : در این حالت، کلیه خطوط (lines) به صورتی کش می آیند و بزرگ می شوند تا کلیه عرض و طول عنصر دربرگیرنده را شامل شوند.
space-between : در این حالت، فاصله اضافی موجود در عنصر دربرگیرنده به صورت مساوی بین خطوط و آیتم های موجود، تقسیم می شود تا هم به صورت عمودی و افقی تراز شوند.
space-around : در این حالت، فضای اضافی در عنصر دربرگیرنده (container) به صورت مساوی بین خطوط یا آیتم های موجود در آن و لبه های عنصر، تقسیم می شود.

آموزش استفاده از مقدار center در خاصیت align-content

در صورت تعیین مقدار center برای خاصیت align-content خطوط (lines) در میانه عمودی عنصر دربرگیرنده (container) قرار می گیرند، همانند تصویر زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار خاصیت align-content عنصر دربرگیرنده اصلی (تگ div با کلاس container) را برابر با center تعیین کرده ایم. این کار باعث شده تا شش جعبه (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: 25px;
           padding: 15px;
           width: 43%;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: center;
       }
   </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>

خروجی

آموزش استفاده از مقدار flex-start در خاصیت align-content

در صورت تعیین مقدار flex-start برای خاصیت align-content، کلیه خطوط (lines) موجود در عنصر دربرگیرنده در نیمه بالایی آن مرتب می شوند، همانند عکس زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار خاصیت align-content عنصر اصلی دربرگیرنده (تگ div که کلاس آن container است) را برابر با flex-start قرار داده ایم. در نتیجه شش جعبه (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: 25px;
           padding: 15px;
           width: 40%;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: 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 class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

خروجی

آموزش استفاده از مقدار flex-end در خاصیت align-content الگوی FlexBox

با تعیین مقدار flex-end در خاصیت align-content، خطوط (lines) یا آیتم های موجود در عنصر دربرگیرنده (container)، در قسمت پایینی آن قرار خواهند گرفت، مانند شکل ذیل :

مثال عملی :

در کد مثال عملی زیر، مقدار خاصیت align-Content عنصر دربرگیرنده اصلی (تگ div که دارای کلاس container است) را معادل flex-end تعیین نموده ایم. در این حالت، جعبه (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: 25px;
           padding: 15px;
           width: 40%;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: flex-end;
       }
   </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>

خروجی

آموزش کاربرد مقدار stretch برای خاصیت align-content

اگر مقدار خاصیت align-content برابر با stretch تعیین شود، خطوط یا آیتم های موجود در عنصر اصلی دربرگیرنده، از لحاظ عمودی و افقی، کش می آیند تا کل عرض و طول آن را پوشش دهند، همانند عکس زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار stretch را برای خاصیت align-content عنصر دربرگیرنده اصلی صفحه که تگ div با کلاس container است، تعریف شده است. در این حالت، جعبه ای که درون آن تعریف شده اند، به حدی کش آمده اند تا کل عرض و طول تگ 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: 25px;
           padding: 15px;
           width: 40;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: stretch;
       }
   </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>

خروجی

آموزش استفاده از مقدار space-around برای خاصیت align-content

اگر مقدار space-around را برای خاصیت align-content تعیین کنید، فضای اضافی موجود در عنصر دربرگیرنده، به صورت مساوی بین خطوط یا آیتم های موجود در آن (شامل خط اول و آخر) تقسیم می شود تا کل عرض و طول عنصر پر شود، همانند عکس زیر :

مثال عملی :

در کد مثال عملی زیر، مقدار space-around را برای خاصیت align-content عنصر دربرگیرنده محتوای اصلی (تگ div با کلاس container) تعیین کرده ایم. با این کار، فضای خالی موجود در تگ 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: 25px;
           padding: 15px;
           width: 40%;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: space-around;
       }
   </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>

خروجی

آموزش کاربرد خاصیت space-between در خاصیت align-content

چنانچه مقدار spce-between را برای مقدار align-content در FlexBox تعیین کنید، فاصله خالی موجود در عنصر دربرگیرنده، بین خطوط و آیتم های موجود در آن به صورت مساوی، تقسیم می شود، با این تفاوت نسبت به مقدار Space-around، که در حالتspace-between، خط اول و آخر، فاقد فاصله با لبه عنصر دربرگیرنده می باشند، همانند عکس زیر :

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: 25px;
           padding: 15px;
           width: 40%;
       }

       .container {
           display: flex;
           height: 100vh;
           flex-wrap: wrap;
           align-content: space-between;
       }
   </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>

خروجی