خصائص justify-items CSS

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

تُستخدم خاصية justify-items على قالب الشبكة لتوجيه الفرعيات (المشاريع الشبكية) في اتجاه السطر الداخلي.

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

لإنتاج أي تأثير تناظر، يجب أن يكون مشروع الشبكة متاحًا في اتجاه السطر الداخلي حول نفسه.

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

انظر أيضًا:

دليل CSS:شبكة CSS

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

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

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

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

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

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

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

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

مثال

مثال 1

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

#container {
  display: grid;
  justify-items: end;
}

تجربة شخصية

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

إعداد طريقة التوجيه للشريط الخاص بالقالب إلى "التناظر الوسطي"، وإعداد طريقة التوجيه للشريط الداخلي إلى "التناظر الأيمن". قيمة الخاصية 'right' تسيطر:

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

تجربة شخصية

مثال 3: إعداد justify-items على مشروع الشريط الموجود في التوجيه المطلق

إعداد طريقة التوجيه للشريط الموجود في التوجيه المطلق إلى "التناظر الأيمن":

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

تجربة شخصية

مثال 4: writing-mode

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

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

تجربة شخصية

مثال 5: direction

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

#container {
  justify-items: start;
  direction: rtl;
}

تجربة شخصية

جملة CSS

justify-items: legacy|normal|stretch|alignment positional|overflow-alignment|alignment baseline|initial|inherit;

قيمة الخاصية

القيمة الوصف
legacy

القيمة الافتراضية.

فقط عند بدء 'legacy'، يرث عنصر الشبكة قيمة الخاصية justify-items لمحتويات الشبكة.

يوجد لتحقيق سلوك التزامن الموروث لـ HTML <center> عنصر وخصائص align.
normal يعتمد على سياق التخطيط، لكنه يشبه 'stretch' في تخطيط الشبكة.
stretch إذا لم يتم تعيين inline-size (العرض)، يتم تمددها لملء خلية الشبكة.
start يتم ضبط العنصر في بداية الاتجاه الداخلي.
left يتم ضبط العنصر على اليسار.
center يتم ضبط العنصر في منتصف الاتجاه الداخلي.
end يتم ضبط العنصر في نهاية الاتجاه الداخلي.
right يتم ضبط العنصر على اليمين.
overflow-alignment
  • 'safe' سيضبط طريقة التزامن للعنصر إلى 'start' إذا كان المحتوى يزحف.
  • 'unsafe' تبقي على قيمة التزامن، بغض النظر عن ما إذا كان محتوى العنصر يزحف أو لا.
baseline-alignment يتم ضبط العنصر مع الأساسيات العليا للعنصر الأب.
initial ضع هذا الخصائص على قيمته الافتراضية. يرجى الرجوع إلى: initial.
inherit يرث هذا الخصائص من عنصر الأب. يرجى الرجوع إلى: inherit.

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

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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0