ویژگی align-items در فلکس باکس

ویژگی الاین آیتمز

ویژگی align-item برای تراز کردن آیتم ها استفاده می شود.

اگر مشابه شکل زیر ظرف فلکس را به صورت یک مستطیل در نظر بگیرم در این صورت justify-content موقعیت یا محل قرارگیری آیتم ها (فرزندان) را به صورت خطی در جهت flex-direction مشخص می کند و ویژگی align-items موقعیت یا محل قرارگیری آیتم ها (فرزندان) را در راستای عمود بر جهت flex-direction مشخص می کند

ویژگی align-items دارای مقادیر (values) زیر می باشد

مقدار پیش فرض stretch
flex-start
baseline
flex-end
center

stretch

stretch مقدار پیش فرض ویژگی align-items می باشد و باعث کشیدگی آیتم ها در راستای align-items می شود

 .container {
   display: flex;
   align-items: stretch ;
  }

item-1

item-2

item-3

item-4

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      align-items: stretch;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
  </div>
</body>
</html>

    

flex-start

flex-start در واقع خط شروع ظرف در جهت align-items می باشد، در این حالت همه آیتم ها به خط شروع ظرف فلکس وصل می شوند، برای مثال در شکل زیر هرچند اندازه آیتم ها باهم متفاوت می باشد ولی همگی به خط شروع ظرف متصل شده اند.

 .container {
   display: flex;
   align-items: flex-start;
  }

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      align-items: flex-start;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
  </div>
</body>
</html>

    

baseline

baseline به خطی گفته می شود که آیتم ها با آن تراز می شوند.

در حالت baseline بعد از اینکه اولین آیتم به خط ظرف رسید ، بقیه آیتم ها با خط وسط آن آیتم تراز می شوند، برای مثال در شکل زیر بعد از اتصال مستطیل شماره 1 به ظرف فلکس بقیه مستطیل ها که از یک کوچکترند با خط وسط آن (baseline) تراز شده اند.

 .container {
   display: flex;
   align-items: flex-baseline ;
  }

آموزش

فلکس

باکس

flexbox

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      align-items: baseline;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
      padding: 30px;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
  </div>
</body>
</html>

    

flex-end

flex-end باعث تراز شدن آیتم ها در انتهای ظرف فلکس در جهت align-items می شود

 .container {
   display: flex;
   align-items: flex-end ;
  }

item-1

item-2

item-3

item-4

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      align-items: flex-end;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
  </div>
</body>
</html>

    

center

center باعث می شود که آیتم ها (فرزندان) در راستای align-items در وسط ظرف فلکس قرار گیرند

 .container {
   display: flex;
   align-items: center ;
  }

item-1

item-2

item-3

item-4

دستور مربوط به ظرف فلکس بالا در زیر به صورت کامل آورده شده است:

     
        <!DOCTYPE html>
<html dir="rtl"  lang="fa-IR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex</title>
   <style>
    .container {
      display: flex;
      align-items: center;
      border: 2px solid #6b9080;
      height: 200px;
    }
    .box {
      padding: 15px;
      font-size: 15px;
    }
    .box-1 {
      background-color:  #184e77;
    }
    .box-2 {
      background-color:  #1e6091;
    }
    .box-3 {
      background-color:  #1a759f;
    }
    .box-4 {
      background-color:  #168aad;
    }
   </style></head>
<body>
  <div class="container">
     <div class="box box-1"> 1 </div>
     <div class="box box-2"> 2 </div>
     <div class="box box-3"> 3 </div>
     <div class="box box-4"> 4 </div>
  </div>
</body>
</html>

    

❮ قبلی بعدی ❯