ویژگی place-items CSS

تعریف و استفاده

برای چیدمان فله‌ای کار نمی‌کند. بنابراین، اگر در چیدمان فله‌ای از برای طرح‌بندی شبکه استفاده می‌شود و اختصاری از属性‌های زیر است:

• attribute align-items
• ویژگی justify-items

اگر attribute place-items دو ارزش دارد:

place-items: start center;

• ارزش attribute align-items 'start' است
• ارزش attribute justify-items 'center' است

اگر属性 place-items فقط یک ارزش دارد:

#container {

• پس مقدار ویژگی align-items و justify-items هر دو 'end' خواهد بود

مثال

مثال

مثال 1

وقتی ویژگی place-items به 'vertical-rl' تنظیم شود، موقعیت انتهای مسیر نوشتاری از پایین به چپ حرکت می‌کند و موقعیت انتهای مسیر خطی از راست به پایین حرکت می‌کند:
  هر عنصر <div> را در ابتدای مسیر خطی و مسیر نوشتاری جعبه شبکه قرار می‌دهد:
}

آزمایش شخصی کنید

place-items: start;

مثال 2: حالت نوشتاری وقتی شبکه‌بندی‌کننده جعبه writing-mode

وقتی ویژگی place-items به 'vertical-rl' تنظیم شود، موقعیت انتهای مسیر نوشتاری از پایین به چپ حرکت می‌کند و موقعیت انتهای مسیر خطی از راست به پایین حرکت می‌کند:
  #container {
  place-items: end;
}

آزمایش شخصی کنید

writing-mode: vertical-rl;

ویژگی justify-items مثال 3: چیدمان فله‌ای برای چیدمان فله‌ای کار نمی‌کند. بنابراین، اگر در چیدمان فله‌ای از ویژگی place-itemsویژگی justify-items مقدار (یعنی مقدار دوم) نادیده گرفته می‌شود.

#wrapper {
  place-items: stretch end;
}

آزمایش شخصی کنید

قوانین CSS

place-items: normal legacy|value|initial|inherit;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

صفحات مرتبط

آموزش:طرح شبکه CSS

آموزش:طرح پویا CSS

منبع:خصوصیت align-items CSS

منبع:ویژگی CSS justify-items

منبع:ویژگی writing-mode CSS