الخاصية flex-flow

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية flex-wrap المختصرة في CSS تستعمل لضبط قيمة الخاصيتين flex-direction و flex-wrap.

بطاقة الخاصية

القيمة الابتدائية لكل قيمة مختصرة:
تُطبَّق على حاويات flex.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة لكل قيمة مختصرة:
/* flex-flow: <flex-direction> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <flex-wrap> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <flex-direction> and <flex-wrap> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* قيم عامة */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

أمثلة

راجع صفحة الخاصيتين flex-direction و flex-wrap لأمثلة تفصيلية عن استخدامهما.

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 29.0 20.0 11 12.5 9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية flex-flow قيمةً واحدةً أو قيمتين من القيم التالية.

<flex-direction>

تُعرِّف هذه القيمة ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه. راجع صفحة الخاصية flex-direction لمزيدٍ من المعلومات.

<flex-wrap>

تُحدِّد هذه الخاصية فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر. راجع صفحة الخاصية flex-wrap لمزيدٍ من المعلومات.

البنية الرسمية

flex-flow: <'flex-direction'> || <'flex-wrap'>;

انظر أيضًا

  • صفحة الخاصية flex صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: flex-basis، و flex-direction، وflex-grow، وflex-shrink، وflex-wrap.
  • صفحة كل من الخاصيات width، وheight المسؤولة عن تحديد أبعاد العنصر.
  • صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

مصادر ومواصفات