آموزش برنامه نویسی - تاپ دمی

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

ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 4 دقیقه
آموزش کامل 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 - بخش اول

این مقاله برای شما چقدر مفید بود ؟

14 اردیبهشت، 1401

اشتراک گزاری مقاله

مقالات مشابه

معرفی  بهترین فریم ورک های  CSS

معرفی بهترین فریم ورک های CSS

در این مقاله نگاهی به بهترین فریم ورک های css داریم و محاسن و معایب هر یک را بررسی می کن...

ادامه مطلب
نحوی انتخاب عناصر یا  Selector ها در CSS

نحوی انتخاب عناصر یا Selector ها در CSS

در این مقاله ابتدا به بررسی css می پردازیم و پس از آن نحوه انتخاب عناصر و انواع Selector...

ادامه مطلب
اشتباهات رایج در  css

اشتباهات رایج در css

در این مقاله ابتدا به تعریف css می پردازیم و پس از آن چند مثال از اشتباهات رایج در css ر...

ادامه مطلب