نمونه کد

یک نمونه ساده از خاصیت align-items:

آزمایشگاه

تعریف و کاربرد

خاصیت 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