نمونه کد

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

آزمایشگاه

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

خاصیت justify-items در محفظه ی شبکه مقدار دهی می شود تا تگ فرزند (آیتم های شبکه ای) را جهت درونی هم سطح کند.

برای صفحاتی با زبان انگلیسی جهت درونی از چپ به راست و جهت block به سمت پایین می باشد.

نکته: برای هم سطح سازی آیتم های شبکه در جهت block به جای درون خطی، از خاصیت align-item استفاده کنید.

اطلاعات

# توضیحات
مقدار پیشفرض ارث بردن از تگ والد
ارث بری خیر
انیمیشن خیر
نسخه CSS3
نگارش JS object.style.justifyItems="وسط"

سازگاری با مرورگر

اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت justify-items هستند.

# کروم ادج فایرفاکس سافاری اپرا
justify-items

شیوه نگارش

مقادیر

مقادیر توضیحات
legacy مقدار پیش فرض را برای خاصیت اعمال می کند.
normal مقدار دهی خاصیت وابسته به زمینه چیدمان آیتم ها دارد.
stretch چنانچه اندازه درونی محفظه (عرض آن) مقدار دهی نشده باشد، برای پر کردن سلول شبکه ای آیتم ها با حالت کشیده نمایش داده می شوند.
start آیتم ها را در جهت شروعی، خطی هم سطح می کند.
left آیتم ها را در جهت چپ هم سطح می کند.
center آیتم ها را در مرکز هم سطح می کند.
end آیتم ها را در جهت پایانی، خطی هم سطح می کند.
right آیتم ها را در جهت راست هم سطح می کند.
overflow-alignment
baseline alignment خاصیت مربوطه با خط پایه هم سطح می شود.
initial این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit این مقدار را از تگ والد خود به ارث می برد.

صفحات مرتبط

آموزش CSS: شبکه CSS

آموزش CSS: موقعیت‌یابی CSS

مرجع CSS: ویژگی align-items

مرجع CSS: ویژگی جهت

مرجع CSS: ویژگی شبکه

مرجع CSS: ویژگی grid-template-columns

مرجع CSS: دارایی خود را توجیه کنید

مرجع CSS: ویژگی موقعیت

مرجع CSS: ویژگی حالت نوشتن