خصائص flex CSS

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

flex هو اختصار لخصائص التالية:

flex تعيينه هو طول المشروع المرن.

تعليق:إذا لم يكن العنصر مشروعًا مرنًا، فإن خاصية flex غير صالحة.

يرجى الرجوع أيضًا إلى:

دليل: CSS Flexbox

مرجع:خصائص flex-basis CSS

مرجع:خصائص flex-direction CSS

مرجع:خصائص flex-flow CSS

مرجع:خصائص flex-grow CSS

مرجع:خصائص flex-shrink CSS

مرجع:خصائص flex-wrap CSS

مرجع:flex خاصية DOM HTML

مثال

لا يهم محتواه، يجعل طول جميع العناصر المرنة متساويًا:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

جربها بنفسك

نص CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

قيمة الخاصية

القيمة الوصف
flex-grow رقم، يحدد كمية التوسع للعنصر مقارنة بالعناصر الأخرى المرنة.
flex-shrink رقم، يحدد كمية الشد للعنصر مقارنة بالعناصر الأخرى المرنة.
flex-basis

طول العنصر.

القيم المقبولة: "auto"،"inherit"، أو قيم قياسية بقيمة "%"،"px"،"em"، أو أي وحدة طول أخرى.
auto مثل 1 1 auto.
initial مثل 0 1 auto. راجع initial.
لا شيء مثل 0 0 auto.
inherit ينتقل عن طريق الوراثة من العنصر الأب. راجع inherit.

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

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

مزيد من الأمثلة

استخدام flex واستعلامات الوسائط لإنشاء ترتيبات مختلفة للشاشات/الأجهزة المختلفة من خلال أبعاد مختلفة:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* تصميم رد الفعلية - إنتاج ترتيب عمودي (100%) بدلاً من ترتيب أفقي (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

جربها بنفسك

دعم المتصفح

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

الرقم الذي يحتوي على -webkit-،-ms- أو -moz- يشير إلى الإصدار الأول الذي يستخدم البادئة.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0