آموزش چینش و ترازبندی تکی آیتم ها در FlexBox

کاربرد خاصیت align-self بسیار شبیه align-items است، با این تفاوت که خاصیت align-self برای چینش و ترازبندی آیتم ها به صورت تکی به کار می رود.
در درس های قبلی به آموزش کار با خاصیت align-items پرداختیم، این خاصیت برای چینش و ترازبندی دسته ای از آیتم ها در یک عنصر دربرگیرنده (container) به کار می رود.
ساختار کلی استفاده از خاصیت align-self به صورت زیر است:

syntax
کد	align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch;

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

flex-start : در این حالت آیتم از لحاظ عمودی در قسمت بالایی عنصر دربرگیرنده خود(container) قرار می گیرد.
flex-end : در این حالت، آیتم از لحاظ عمودی در قسمت پایینی عنصر دربرگینده خود قرار می گیرد.
flex-center : در این حالت آیتم، به لحاظ ترازبندی عمودی(vertical) در میانه عنصر دربرگیرنده خود قرار می گیرد.
stretch : در این حالت، آیتم مورد نظر از لحاظ عمودی، آنقدر کش می آید تا کل ارتفاع عنصر دربرگیرنده خود را پوشش دهد.
baseline : در صورت تعیین مقدار baseline برای خاصیت align-self، آیتم در عنصر دربرگیرنده، در یک خط افقی و از نقطه شروع، مرتب می شوند.

در ادامه، با ارائه کد و مثال های عملی، هریک از مقادیر خاصیت align-self را در عمل نشان داده ایم.

آموزش کاربرد مقدار flex-start در خاصیت align-self

اگر مقدار flex-start را برای خاصیت align-self تعیین نمایید، آیتم مورد نظر، به لحاظ عمودی در قسمت بالایی عنصر دربرگیرنده خود قرار خواهد گرفت. همانند عکس زیر:

نکته :

مقدار Flex-start، حالت پیش فرض خاصیت align-self بوده و آیتم ها همواره در قسمت بالایی عنصر دربرگیرنده خود، مرتب می شوند.

مثال عملی :

در کد مثال عملی زیر، 6 جعبه (Box) را درون یک عنصر دربرگیرنده (تگ div با کلاس container) تعریف کرده ایم. برای جعبه چهارم، مقدار خاصیت align-self را بر روی Flex-start تنظیم کرده ایم، که باعث شده در قسمت بالای تگ div قرار بگیرد (البته حالت پیش فرض این خاصیت است و مابقی جعبه ها هم به صورت خودکار در بالای آن مرتب شده اند):

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
           align-self: start;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

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

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

خروجی

آموزش کاربرد مقدار flex-end در خاصیت align-self :

در صورت تعیین مقدار flex-end برای خاصیت align-self، آیتم مورد نظر، از لحاظ عمودی در قسمت پایینی عنصر دربرگیرنده خود، قرار خواهد گرفت. همانند عکس زیر:

مثال عملی :

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

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
           align-self: flex-end;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

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

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

خروجی

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

در صورت تعیین مقدار center برای خاصیت align-self، آیتم مورد نظر، به لحاظ عمودی در میانه عنصر دربرگیرنده خود قرار خواهد گرفت، همانند عکس زیر:

مثال عملی :

در کد مثال عملی زیر، 6 جعبه (Box) را در یک تگ div تعریف کرده ایم. برای عنصر چهارم، مقدار خاصیت align-self برابر Conter تعیین شده که باعث شده تا در میانه عنصر div قرار بگیرد:

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
           align-self: center;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

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

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

خروجی

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

اگر مقدار خاصیت strel یک آیتم را بر روی مقدار stretch تنظیم کنید، عنصر مورد نظر آنقدر کش می آید تا کل ارتفاع عنصر دربرگیرنده خود را پوشش دهد. همانند عکس زیر:

مثال عملی :

در کد مثال عملی زیر، 6 جعبه (Box) را درون یک تگ div تعریف کرده ایم که به صورت پیش فرض، تمامی آن ها در نیمه بالایی عنصر، تراز شده اند.
اما برای عنصر چهارم، مقدار خاصیت align-self را بر روی Stretch تنظیم کرده ایم که باعث شده تا عنصر مورد نظر کش آمده و کل ارتفاع div دربرگیرنده آن را اشغال کند :

syntax

کد

<!doctype html>

<html>
   <style>
       .box1 {
           background: green;
       }

       .box2 {
           background: blue;
       }

       .box3 {
           background: red;
       }

       .box4 {
           background: magenta;
           align-self: stretch;
       }

       .box5 {
           background: yellow;
       }

       .box6 {
           background: pink;
       }

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

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

خروجی