خصائص justify-self CSS

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

توجيه الخاصية justify-self يقوم بتوجيه العنصر grid item داخل وحدة الشبكة الخاصة به على طول اتجاه السطر.

للصفحات باللغة الإنجليزية، اتجاه السطر هو من اليسار إلى اليمين، واتجاه الكتلة هو نحو الأسفل.

للحصول على أي تأثير من هذا الخصائص، يجب أن يكون العنصر grid item قد أحدث مساحة متاحة حول نفسه في اتجاه السطر.

نصيحة:لتحقيق توجيه العنصر grid item في اتجاه الكتلة بدلاً من اتجاه السطر، استخدم: خاصية align-self أو خاصية align-items الخصائص.

يرجى الرجوع إلى:

دليل CSS:grid CSS

دليل CSS:توجيه CSS

دليل CSS:خاصية align-content

دليل CSS:خاصية align-items

دليل CSS:خاصية align-self

دليل CSS:خاصية direction

دليل CSS:خاصية grid

دليل CSS:خاصية grid-template-columns

دليل CSS:خاصية position

دليل CSS:خاصية writing-mode

يرجى الرجوع إلى:

مثال

مثال 1

توجيه العنصر grid item إلى اليمين في وحدة الشبكة الخاصة به:

.red {
  display: grid;
  justify-self: right;
}

جرب بنفسك

مثال 2: مقارنة justify-self مع justify-items

تعيين طريقة التوجيه الخاصة بالقضيب إلى 'مركزي'، والعنصر grid item نفسه إلى 'اليمين'. قيمة الخاصية 'right' تسيطر:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

جرب بنفسك

مثال 3: تعيين justify-self على العنصر grid item الموجود بالتوجيه الإضافي

تعيين طريقة التوجيه للعنصر grid item الموجود بالتوجيه الإضافي إلى 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

جرب بنفسك

مثال 4: writing-mode

عندما يتم تعيين قيمة الخاصية writing-mode لشخصية العنصر grid container إلى vertical-rl، فإن اتجاه السطر هو نحو الأسفل. النتيجة هي أن نقطة البداية للقضيب تتحرك إلى الأعلى، ونهاية القضيب تتحرك إلى الأسفل:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

جرب بنفسك

مثال 5: direction

عندما يتم تعيين قيمة الخاصية direction للعنصر المصدر إلى 'rtl'، يكون الاتجاه الداخلي من اليمين إلى اليسار. النتيجة هي أن بداية الصندوق تتحرك من اليسار إلى اليمين، وأن نهاية الصندوق تتحرك من اليمين إلى اليسار:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

جرب بنفسك

جملة CSS

justify-self: auto|normal|stretch|الترتيب الموضعي|overflow-alignment|تحجيم الأساس|initial|inherit;

قيمة الخاصية

القيمة الوصف
auto القيمة الافتراضية. يرث قيمة الخاصية justify-self لصندوق الشبكة.
normale

يعتمد على سياق التخطيط، ولكن يشبه 'stretch' لمكون الشبكة في تخطيط الشبكة عند عدم تعيين size.

إذا تم تعيين size، فإن سلوك قيمة الخاصية يشبه 'start'.
تمدد إذا لم يتم تعيين inline-size (العرض)، فإنه يتم تمدده لملء خلية الشبكة.
البداية يبرز العنصر في بداية الاتجاه الداخلي.
اليسار يبرز العنصر إلى اليسار.
الوسط يبرز العنصر إلى الوسط.
النهاية يبرز العنصر في نهاية الاتجاه الداخلي.
اليمين يبرز العنصر إلى اليمين.
overflow-alignment
  • 'safe' سيقوم بتعيين طريقة التزامن للعنصر إلى 'start' إذا كان المحتوى يتجاوز.
  • 'unsafe' يحافظ على قيمة التزامن، بغض النظر عن ما إذا كان محتوى العنصر يتجاوز.
تحجيم الأساس يبرز العنصر مع الأب الأساسي للعنصر.
initial ضع هذا الخصائص على قيمته الافتراضية. انظر initial.
inherit يرث هذا الخصائص من عنصر الأب. انظر inherit.

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

القيمة الافتراضية: auto
الوراثة: لا
صنع المتحرك: غير مدعوم. انظر:خصائص المتحرك.
الإصدار: CSS3
جافا سكربت الجملة: object.style.justifySelf="right"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية لأول مرة.

كروم إدج فايرفوكس سفاري أوبرا
كروم IE / Edge فايرفوكس سفاري أوبرا
57.0 16.0 45.0 10.1 44.0