ویژگی CSS justify-items
- صفحه قبل justify-content
- صفحه بعدی justify-self
تعریف و استفاده
ویژگی justify-items بر روی جعبه شبکه تنظیم میشود تا فرزندان (جعبههای شبکه) در جهت درونخط قرار گیرند.
برای صفحات انگلیسی، جهت درونخط از چپ به راست و جهت بلوک به پایین است.
برای اینکه این ویژگی هرگونه تأثیر قرارگیری داشته باشد، جعبه شبکه باید در جهت درونخط در اطراف خود فضای قابل استفاده داشته باشد.
توضیح:برای قرارگیری جعبههای شبکه در جهت بلوک به جای جهت درونخط، از: ویژگی align-items ویژگیها.
لطفاً به: مراجعه کنید
آموزش CSS:CSS Grid
آموزش CSS:تصحیح CSS
دستورالعمل CSS:ویژگی align-items
دستورالعمل CSS:ویژگی direction
دستورالعمل CSS:ویژگی grid
دستورالعمل CSS:ویژگی grid-template-columns
دستورالعمل CSS:ویژگی justify-self
دستورالعمل CSS:ویژگی position
دستورالعمل CSS:ویژگی writing-mode
مثال
مثال 1
هر جعبه شبکه را در انتهای جعبههای خود در جهت درونخط قرار دهید:
#container { display: grid; justify-items: end; }
مثال 2: مقایسه justify-items و justify-self
روش قرارگیری در برابر جعبه به ‘وسط’ تنظیم شده است، جعبه خود به ‘راستجمع’ تنظیم شده است. مقدار 'right' برنده است:
#container { display: grid; justify-items: center; } .blue { justify-self: right; }
مثال 3: تنظیم justify-items بر روی جعبههای دارای قرارگیری مطلق
تنظیم روش قرارگیری جعبههای دارای قرارگیری مطلق به ‘راستجمع’:
#container { display: grid; position: relative; justify-items: right; } .blue { position: absolute; }
مثال 4: writing-mode
وقتی که مقدار ویژگی writing-mode عناصر جعبه شبکه به vertical-rl تنظیم شود، جهت درونخط به پایین تغییر میکند. نتیجه این است که نقطه شروع جعبه از سمت چپ به بالا حرکت میکند و نقطه پایان جعبه از سمت راست به پایین حرکت میکند:
#container { justify-items: end; writing-mode: vertical-rl; }
مثال 5: direction
وقتی که مقدار ویژگی direction عنصر شبکه به 'rtl' تنظیم شود، جهت خطی از راست به چپ است. نتیجه این است که نقطه شروع شبکه از سمت چپ به سمت راست حرکت میکند و نقطه انتهایی شبکه از سمت راست به سمت چپ حرکت میکند:
#container { justify-items: start; direction: rtl; }
جملات CSS
justify-items: legacy|normal|stretch|همزمانی مکانی|overflow-alignment|همزمانی خط پایه|initial|inherit;
مقدار ویژگی
مقدار | توضیح |
---|---|
legacy |
مقدار پیشفرض. تنها در حالتی که با 'legacy' شروع شود، اگر مقدار justify-self عنصر شبکه به 'auto' باشد، آن عنصر مقدار ویژگی justify-items شبکهای را ارث میبرد. وجود آن برای پیادهسازی رفتار ارثبرداری قدیمی <center> عناصر HTML و ویژگیهای align است. |
normal | بسته به محیط پیکربندی، اما مشابه 'stretch' در تراز شبکه است. |
stretch | اگر inline-size (عرض) تنظیم نشده باشد، کشیده میشود تا سلول شبکه را پر کند. |
start | پروژهها را در ابتدای جهت خطی همزمانی میکند. |
left | پروژهها را به سمت چپ همزمانی میکند. |
center | پروژهها را به مرکز همزمانی میکند. |
end | پروژهها را در انتهای جهت خطی همزمانی میکند. |
right | پروژهها را به سمت راست همزمانی میکند. |
overflow-alignment |
|
baseline-alignment | این ویژگی با خط پایه عناصر همزمانی دارد. |
initial | این ویژگی را به مقدار پیشفرض خود تنظیم کنید. لطفاً به: initial. |
inherit | این ویژگی از ویژگی پدر خود ارث میبرد. لطفاً به: inherit. |
جزئیات فنی
مقدار پیشفرض: | legacy |
---|---|
ارثبرداری: | خیر |
انیمیشنسازی: | پشتیبانی نمیشود. لطفاً به:ویژگیهای مرتبط با انیمیشن. |
نسخه: | CSS3 |
جملات برنامهنویسی JavaScript: | object.style.justifyItems="center" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخهای اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی میکند.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | IE / Edge | Firefox | Safari | Opera |
57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
- صفحه قبل justify-content
- صفحه بعدی justify-self