خصوصیات align-items CSS

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

align-items لتحديد طريقة التوجيه الافتراضية للعناصر داخل صندوق التمدد.

استخدم الخاصيةنصيحة: align-self استخدام هذه الخاصية لتحديد align-items.

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

دليل CSS:شبكة CSS

دليل CSS:Flexbox CSS

دليل CSS:خصائص alignContent

دليل CSS:خصائص alignSelf

دليل CSS:خصائص justifyContent

دليل CSS:خصائص justifyItems

دليل CSS:خصائص justifySelf

دليل HTML DOM:خصائص alignItems

مثال

توضح كيفية تعيين تنسيق <div> الإليكتروني لكل العناصر لتكون مركزية:

div {
  display: flex;
  align-items: center;
}

جرب بنفسك

جافا سكربت:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

قيمة الخاصية

القيمة الوصف
stretch الافتراضي. يتم تمديد العنصر لتتناسب مع المحتوى.
center يتم وضع العنصر في منتصف المحتوى.
flex-start يتم وضع العنصر في بداية المحتوى.
flex-end يتم وضع العنصر في نهاية المحتوى.
baseline يتم تحديد العنصر في خط الأساس للمحتوى.
initial تعيين هذه الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial.
inherit يرجى الرجوع إلى لمعرفة كيفية وراثة هذه الخاصية من عنصر الأب. يرجى الرجوع إلى inherit.

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

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

دعم المتصفح

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

كروم أوبرا فايرفوكس سفاري إيدج
كروم أوبرا فايرفوكس سفاري إيدج
57.0 16.0 52.0 10.1 44.0