آموزش جامع و کامل Flexible Box - آموزش Justify-content

آموزش جامع و کامل Flexible Box – آموزش Align-items

سلام عرض میکنم خدمت بازدیدکنندگان محترم وبسایت آیم سئو ، امروز در خدمت شما عزیزان با آموزش جامع و کامل Flexible Box – آموزش Align-items هستیم . با ما همراه باشید .

برای اینکه در این دوره مفاهیم را کامل متوجه بشوید ، بهتر از قسمت های قبلی را هم مطالعه کنید :

  1. آموزش جامع و کامل Flexible Box – آموزش Flex-direction
  2. آموزش جامع و کامل Flexible Box – آموزش Flex-wrap
  3. آموزش جامع و کامل Flexible Box – آموزش Flex-flow
  4. آموزش جامع و کامل Flexible Box – آموزش Justify-content

 

ویژگی Align-items :

در فلکس باکس یکی از قابلیت بسیار مهم و مورد توجه ، ترازبندی عمودی آیتم هاست ( این واقعا یکی از بزرگترین دغدغه های طراح وب ! ) شما با این ویزگی میتوانید آیتم هارا در راستای محور y جا به جا کند ، یا به کلام واضح تر آیتم هارا در جهات بالا و پایین در Div پدر کنترل کند .

این ویژگی شامل ۵ مقدار با نام های زیر می باشد :

  1. Center
  2. Flex-start
  3. Flex-end
  4. Stretch
  5. Baseline

 

مقدار Center : 

این مقدار آیتم هارا دقیقا در وسط عنصر از لحاظ عمودی ( بالا و پایین ) قرار میدهد .

مثال :


flex-contaeiner {
display:flex:
align-items:center;
}

۱
۲
۳
۴

 

 

مقدار Flex-start : 

حتما شما تا بحال در حین طراحی وب ، از یک باکس با ارتفا بالا استفاده کرده اید ، وقتی شما یک آیتم در آن استفاده میکنید ، یکی از مشکلات جا به جایی آیتم های بعدی هستن ، در فلکس باکس ، شما با مقدار Flex-start میتوانید ، آیتم هارا از گوشه و نقطه شروع بچینید ، بدون هیچ مشکل و بهم ریختگی

مثال :


flex-contaeiner {
display:flex:
align-items:flex-start;
}

۱
۲
۳
۴

 

 

مقدار Flex-end: 

این مقدار همانند توضیحات بالا ، از انتهای باکس پدر شروع مکاندهی مناسب برای آیتم ها میکند ، اما از انتها !

مثال :


flex-contaeiner {
display:flex:
align-items:flex-end;
}

۱
۲
۳
۴

 

 

مقدار Stretch: 

این مقدار یک مقدار عشق است ! برای شما حتما این اتفاق افتاده است که بخواهید یک آیتم از بالا تا پایین باکس پدر را پُر کند یا بپوشاند ، الان موفق شدیم ، دیگر با استفاده از حداقل/حداکثر ارتفا و پوسیشرن ها نداریم ، فقط با یک مقدار Stretch همه چیز رو به راه می شود . این مقدار پیشفرض می باشد و همچنین در این مقدار نباید آیتم ارتفا داشته باشد

مثال :


flex-contaeiner {
display:flex:
align-items:stretch;
}

۱
۲
۳
۴

 

 

مقدار Baseline : 

این مقدار آیتم هارا در روی یک خط فرضی در وسط باکس پدر بر اساس ردیف شماره فونت آنتها مرتب میکند، کمکاربردترین است تقریبا !!!

آیتم ها بر اساس فونت های بزرگ و کوچک بالا و پایین می شوند تا نوشته ها در یک سطر قرار بگیرند

مثال :


flex-contaeiner {
display:flex:
align-items:Baseline;
}

۱

۲

۳

۴

امیدوارم از این آموزش لذت برده باشید .

تاریخ انتشار : ۰۳ بهمن