این آموزش در تاریخ ۱۴۰۰/۱۰/۲۶ آپدیت شده است.

آموزش ویژگی align-self در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی align-self در CSS با من همراه باشید.

آموزش ویژگی align-self در CSS

Free-Learn

ویژگی align-self در CSS

با استفاده از ویژگی align-self در CSS میتوان برای هر یک از آیتم های یک فلکس باکس بصورت مجزا تراز یا موقعیت قرار گیری مشخص کرد.

در زبان CSS ما ویژگی ای به اسم align-items داریم که با استفاده از آن میتوان تراز آیتم هارو بصورت عمودی مشخص کرد، حال ویژگی align-items بروی تمامی آیتم ها عمل میکند ولی ویژگی align-self میتونه فقط بروی یک آیتم خاص کار کند.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی align-self را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از مقدار Center و Flex-End

امتحان کنید

Free-Learn

جدول مشخصات ویژگی align-self در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.alignSelf=”center”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی align-self در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari Edge
align-self ۲۹ ۲۸ ۱۲٫۱ ۹ ۱۲

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی align-self در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto مقدار پیش فرض
در اولویت اول ترازبندی اش را از والد یا پدر خودش میگیرد
و اگه والدش ترازی نداشت از مقدار stretch استفاده میکند
stretch سعی میکند تمام فضای ظرف را بپوشاند
center آیتم مورد نظر را در وسط ظرف قرار میدهد
flex-start آیتم مورد نظر را در قسمت شروع ظرف قرار میدهد
flex-end آیتم مورد نظر را در قسمت پایانی ظرف قرار میدهد
baseline تراز به نسبت خط پایه ( محتوای ) آیتم مشخص میشود
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • در صورت استفاده از ویژگی align-self ، مقدار ویژگی align-items ( اگه ازش استفاده کرده باشید ) نادیده گرفته می شود.

Free-Learn

دریافت PDF یا پرینت این مطلب