خصائص align-content CSS
- الصفحة السابقة accent-color
- الصفحة التالية align-items
التعريف والاستخدام
خصائص align-content تعديل الخاصية خصائص flex-wrap سلوك الخاصية. إنه مشابه ل align-items مماثلة، ولكنها لا تقوم بمساواة العناصر التمدد، بل تقوم بمساواة خطوط التمدد.
ملاحظة:يجب أن يكون هناك سطور متعددة من العناصر لتطبيق هذا الخاصية!
نصيحة:استخدام justify-content الخصائص يمكن أن تقوم بمساواة العناصر على المحور الرئيسي (main-axis) أفقياً.
يرجى الرجوع إلى:
دليل CSSFlexbox CSS
دليل CSSشبكة CSS
دليل CSSخصائص align-items
دليل CSSخصائص align-self
دليل CSSخصائص justify-content
دليل HTML DOMخصائص alignContent
مثال
جمع السطرين في منتصف وحدة التمدد:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
نصيحة CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| stretch | القيمة الافتراضية. يتم تمدد السطرين لملء المساحة المتبقية. |
| center | تجمع السطرين باتجاه منتصف وحدة التمدد. |
| flex-start | تجمع السطرين باتجاه بداية وحدة التمدد. |
| flex-end | تجمع السطرين باتجاه نهاية وحدة التمدد. |
| space-between | توزيع السطرين بالتساوي داخل وحدة التمدد. |
| space-around | توزيع السطرين بالتساوي داخل وحدة التمدد، وكل منهما يأخذ نصف المساحة. |
| initial | أعد هذا الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial. |
| inherit | يرث هذا الخاصية من عنصر الأب. يرجى الرجوع إلى inherit. |
تفاصيل التقنية
| القيمة الافتراضية: | stretch |
|---|---|
| الوراثة: | لا |
| صنع التحريك: | غير مدعوم. يرجى الرجوع إلى:خصائص التحريك. |
| الإصدار: | CSS3 |
| جافا سكريبت النصيحة: | object.style.alignContent="center" |
دعم المتصفح
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
- الصفحة السابقة accent-color
- الصفحة التالية align-items
