خصائص place-items CSS

التعريف والاستخدام

مثال 3: تصميم الصندوق المرن الميزة تستخدم في ترتيب الشبكة، وهي اختصار للميزات التالية:

• align-items
• سمة justify-items،

إذا كان ميزة place-items لديها قيمتان:

place-items: start center;

• قيمة ميزة align-items هي 'start'
• قيمة ميزة justify-items هي 'center'

إذا كان ميزة place-items لديها قيمة واحدة فقط:

عندما يتم تعيين قيمة سمة place-items إلى 'vertical-rl'، يتحرك نهاية اتجاه الصفحة من الأسفل إلى اليسار، وينتقل نهاية الاتجاه العرضي من اليمين إلى الأسفل:

• إذا كانت قيمتي لسمتي align-items و justify-items هي 'end'

مثال

النموذج

مثال

writing-mode
  مثال 1
}

جرب بنفسك

توضع كل عنصر <div> في بداية اتجاه الصفحة واتجاه العرض للخلية الشبكية:

place-items: start; مثال 2: نمط الكتابة عندما يكون محطات الشبكة

writing-mode
  عندما يتم تعيين قيمة سمة place-items إلى 'vertical-rl'، يتحرك نهاية اتجاه الصفحة من الأسفل إلى اليسار، وينتقل نهاية الاتجاه العرضي من اليمين إلى الأسفل:
  #container {
}

جرب بنفسك

place-items: end;

سمة justify-items، writing-mode: vertical-rl; مثال 3: تصميم الصندوق المرن سمة place-items غير تناسق في تصميم الصندوق المرن. لذلك، إذا تم استخدامسمة justify-items، القيمة (القيمة الثانية) سيتم تجاهلها.

#wrapper {
  place-items: stretch end;
}

جرب بنفسك

الجملة النصية لـ CSS

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

قيمة السمة

تفاصيل التقنية

دعم المستعرض

الرقم في الجدول يعكس إصدار المستعرض الأول الذي يدعم هذا السمة بشكل كامل.

الصفحات ذات الصلة

دروس:تخطيط الشبكة CSS

دروس:تخطيط الصفحة الديناميكي CSS

المرجع:خصائص align-items CSS

المرجع:خصائص justify-items CSS

المرجع:خصائص writing-mode CSS