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

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

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

Free-Learn

ویژگی align-items در CSS

ویژگی align-items ویژگی ای ایست که با استفاده از آن میتوان ترازبندی (موقعیت قرار گیری) آیتم های داخل یک ظرف یا کانتینر ( container ) فلکس را مشخص نمود.

Free-Learn

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

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

مثال شماره ۱ : استفاده از مقدار center

امتحان کنید

مثال شماره ۲ : استفاده از مقدار baseline

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

» عددی که در کنار -webkit- وجود دارد ، یعنی از آن نسخه به بالا باید از پیشوند -webkit- استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام ویژگی Chrome Firefox Opera Safari IE
align-items ۲۱٫۰ ۲۰٫۰ ۱۲٫۱ ۹٫۰
۷٫۰ -webkit-
۱۱٫۰

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

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

Free-Learn

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

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

برای پشتیبانی و استفاده از این ویژگی در مرورگر سافاری ( Safari ) از نسخه ۷ تا ۹ باید از پیشوند -webkit- استفاده نمود.

Free-Learn

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