آموزش کامل Flexbox - بخش دوم

آموزش align-items

برای استفاده از align-items ها ابتدا برای تگ دلخواه خود به مقدار دلخواه height تعیین می کنیم.

align-items شامل قسمت های مختلفی میشه که در ادامه با مثال هرکدام رو بررسی می کنیم.

حالت center

<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: center;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

با استفاده از align-items: center المنت های درون صفحه ما در محور y ها در وسط صفحه قرار می گیرند.

حالت start

#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

با استفاده از align-items: start المنت های درون صفحه ما در محور y ها در سمت راست صفحه قرار می گیرند ، البته بستگی به راست چین بودن یا چپ چین بودن صفحه ما داره.

حالت end

<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: flex-end;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

با استفاده از align-items: end المنت های درون صفحه ما در محور y ها در سمت چپ صفحه قرار می گیرند ، البته بستگی به راست چین بودن یا چپ چین بودن صفحه ما داره.

حالت baseline

<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: baseline;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

baseline خیلی شبیه حالت start هست ولی در واقع align-items: baseline با توجه به سایز های مختلف المنت های ما همه را تو یک خط قرار میده مثل مثالی که داشتیم.

حالت stretch

<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: stretch;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

با استفاده از align-items: stretch المنت های درون صفحه ما در محور y ها اندازه ی تگ اصلی خودشون رو می گیرند برای مثال تویه مثال ما اندازه تگ div با "id="main رو به خودش میگیره در حالت پیش فرض align-items ما بر روی stretch قرار دارد.

آموزش align-content

align-content شامل flex-end ، flex-start ، center ، space-around ، space-evenly ، space-between روش کار این مقادیر هم تویه بخش اول همین مقاله کامل توضیح دادم.

مثال برای align-content: center

<style> 
#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

#main div {
  width: 70px;
  height: 70px;
}
</style>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

آموزش align-self

با استفاده از align-self می تونیم به تک تک المنت های داخل صفحه به صورت جداگانه استایل بدیم و روی اون ها کنترل داشته باشیم مثل مثال زیر :

<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
}

#myBlueDiv {
  align-self: center;
}
</style>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

Property های align-self شامل flex-start ،flex-end ،center ،stretch ، baseline میشه

order چیه ؟

با تعیین order هر المنت ، می تونیم جایگاه اون رو توی صفحه مشخص کنیم و ترتیب همه ی المنت ها رو کنترل کنیم برای این کار کافیه به هر کدوم از المنت ها یک order بدیم مثالا order های 1-2-3 و...

آموزش کامل Flexbox - بخش اول