خصائص place-self CSS

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

place-self الخاصية تستخدم لتقييد مشروع الشبكة، وهي اختصار للعديد من الخاصيات التالية:

• align-self
• justify-self

إذا كان لديك قيمتين لـ 'place-self':

place-self: start center;

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

إذا كان لديك قيمة واحدة فقط لـ 'place-self':

place-self: end;

• فقد تكون قيمتي 'align-self' و 'justify-self' كلاهما 'end'

مثال

مثال 1

تقييد مشروع الشبكة إلى موقف النهاية في اتجاه الكتلة والاتجاه السطرية:

#myDiv {
  place-self: end;
}

جرب بنفسك

مثال 2: نمط الكتابة

عندما يكون <div> عنصر writing-mode عندما يتم تعيين قيمة 'vertical-rl' لـ '属性值'، يتحرك خلية الشبكة في موقف النهاية في اتجاه الكتلة من الأسفل إلى اليسار، وفي اتجاه السطر من اليمين إلى الأسفل:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

جرب بنفسك

مثال 3: تخطيط الصندوق المرن

place-self يمكن استخدام الخاصية أيضًا في مشاريع الصندوق المرن، ولكن justify-self القيمة الثانية ستُتجاهل لأنها غير مجدية في تخطيط الصندوق المرن:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

جرب بنفسك

قواعد اللغة CSS

place-self: auto|value|initial|inherit;

قيمة الخصائص

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

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

تصميم الشبكة CSSCSS 网格布局

تصميم الشبكة CSSدروس:

تصميم الشبكة CSSخصائص align-self في CSS

تصميم الشبكة CSSخصائص justify-self CSS

تصميم الشبكة CSSخصائص writing-mode في CSS