CSS place-items کا پروپرٹی

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

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

• align-items
• ویژگی

اگر place-items속یت دو مقدار دارد:

place-items: start center;

• مقدار align-items 'start' است
• مقدار justify-items 'center' است

اگر place-items속성 کوچکترین یک مقدار دارد:

place-items: end;

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

مثال

نمونه 1

هر عناصر <div> را در ابتدای مسیر خطوط و مسیر بلوک جعبه شبکه‌بندی‌دهنده خود قرار دهید:

#container {
  place-items: start;
}

آزمایش کنید

نمونه 2: روش نوشتن

وقتی جعبه شبکه‌بندی‌دهنده writing-mode وقتی ویژگی به 'vertical-rl' تنظیم شود، پایان مسیر بلوک از پایین به چپ حرکت می‌کند و پایان مسیر خطوط از راست به پایین حرکت می‌کند:

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

آزمایش کنید

نمونه 3: ترتیب انعطاف‌پذیر

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

#wrapper {
  place-items: stretch end;
}

آزمایش کنید

جملات CSS

place-items: normal legacy|مقدار|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

مرتبط صفحه

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

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

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

مراجعه:CSS جا-بندی-آئیتمز属性

مراجعه:CSS writing-mode امتیازات