تعریف و کاربرد
خاصیت align-item تراز و جهت دهی را به صورت پیش فرض برای اطلاعت داخل یک محفظه منعطف یا همان flexbox فراهم می کند.
در یک flexbox اطلاعت به صورت پیش فرض بر روی حالت عمودی تنظیم می شوند.
در یک محفظه شبکه ای، اطلاعات در جهت های تعیین شده برای block ها تنظیم می شوند.
برای استفاده بهینه از خاصیت align-item می بایست برای آیتم ها و اطلاعات، فضای کافی وجود داشته باشد تا بتوانند جهت خود را بدون مشکل اشغال کنند (از کادر خارج نشوند).
اطلاعات
# | توضیحات |
---|---|
مقدار پیشفرض | نرمال |
ارث بری | خیر |
انیمیشن | خیر |
نسخه | CSS3 |
نگارش JS | object.style.alignItems="وسط" |
سازگاری با مرورگر
اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت align-content هستند.
# | کروم | ادج | فایرفاکس | سافاری | اپرا |
---|---|---|---|---|---|
align-items |
شیوه نگارش
مقادیر
مقادیر | توضیحات |
---|---|
normal | به صورت پیش فرض برای تمام مقادیر مربوطه به خاصیت align-items شروع به فعالیت می کند. |
stretch | اطلاعات را متناسب با محفظه، به صورت کشیده اعمال می کند. |
center | اطلاعات را متناسب با فضای محفظه، در وسط قرار می دهد. |
flex-start | اطلاعات را متناسب با فضای محفظه، در بخش شروع box اعمال می کند. |
flex-end | اطلاعات را متناسب با فضای محفظه، در بخش پایان box اعمال می کند. |
start | باعث می شود تا اطلاعات و آیتم ها در بخش های مختص به خود از بخش شروع block ها اعمال شوند. |
end | باعث می شود تا اطلاعات و آیتم ها در بخش های مختص به خود از بخش پایان block ها اعمال شوند. |
basekline | اطلاعات را متناسب با فضای محفظه، در خظ پایه box اعمال می کند. |
intial | خاصیت و مقدار مربوطه به خود را به تنظیمات پیش فرض خود اضافه می کند. |
inherit | ویژگی خاصیت و مقدار مربوطه را از تگ والد خود به ارث می برد. |
صفحات مرتبط
آموزش CSS: شبکه CSS
آموزش CSS: CSS flexbox
مرجع CSS: ویژگی align-content
مرجع CSS: ویژگی align-self
مرجع CSS: ویژگی justify-content
مرجع CSS: دارایی justify-items
مرجع CSS: دارایی justify-self
مرجع HTML DOM: ویژگی alignItems