نمونه کد

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

آزمایشگاه

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

خاصیت justify-self یک آیتم شبکه ای را در سلولی مربتط در جهت داخلی هم سطح می کند.

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

به جهت هم سطح سازی خاصیت justify-self از آیتم grid در فضای اطراف آیتم ها استفاده می کنند.

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

اطلاعات

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

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

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

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

شیوه نگارش

مقادیر

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

صفحات مرتبط

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

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

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

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

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

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

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

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

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

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