خصائص flex-flow CSS

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

خصائص flex-flow هي اختصار لخصائص التالي:

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

التعليقات:

انظر أيضًا:دليل CSS التعليمي:

خصائص flex-shrinkصندوق CSS المروجة

خصائص flex-shrinkخصائص flex

خصائص flex-shrinkخصائص flex-direction

خصائص flex-shrinkخصائص flex-basis

خصائص flex-shrinkخصائص flex-grow

خصائص flex-shrinkدليل CSS:

خصائص flex-wrapدليل HTML DOM:

خصائص flexFlow

مثال

تظهر العناصر المروجة في اتجاه معكوس، وتبدأ في التبديل إلى السطر الآخر عند الحاجة:
  div {
  display: flex;
flex-flow: row-reverse wrap;

}

تجربة شخصية

جافا سكربت لغة CSS

flex-flow: flex-direction flex-wrap|initial|inherit;

قيمة الخاصية القيمة
flex-direction

flex-wrap

  • وصف
  • row
  • row-reverse
  • column
  • أضف هذا الخصائص إلى قيمته الافتراضية. انظر إلى:
  • من خلال التوريث من العنصر الأب لتحديد هذا الخصائص. انظر إلى:

column-reverse

القيمة الافتراضية هي "row".
يحدد اتجاه العناصر المروجة.

flex-wrap

  • القيم الممكنة:
  • nowrap
  • wrap
  • أضف هذا الخصائص إلى قيمته الافتراضية. انظر إلى:
  • من خلال التوريث من العنصر الأب لتحديد هذا الخصائص. انظر إلى:

wrap-reverse

القيمة الافتراضية هي "nowrap".
أضف هذا الخصائص إلى قيمته الافتراضية. انظر إلى: يحدد ما إذا كان يجب على العناصر المروجة التبديل إلى السطر الآخر. أضف هذا الخصائص إلى قيمته الافتراضية. انظر إلى:خصائص الرسوم المتحركة
من خلال التوريث من العنصر الأب لتحديد هذا الخصائص. انظر إلى: initial من خلال التوريث من العنصر الأب لتحديد هذا الخصائص. انظر إلى:خصائص الرسوم المتحركة

inherit

تفاصيل التقنية القيمة الافتراضية:
row nowrap الوراثة:
لا صنع الرسوم المتحركة:غير مدعوم. انظر إلى:خصائص الرسوم المتحركة
. الإصدار:
CSS3 جافا سكربت:

object.style.flexFlow="column nowrap"

دعم المتصفح

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

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