الخاصية flex-flow

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

/* 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: row flex-wrap: nowrap
تُطبَّق على	حاويات flex.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل قيمة مختصرة: flex-direction: كما حُدِّدَت. flex-wrap: كما حُدِّدَت.

أمثلة

راجع صفحة الخاصيتين 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'>;

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

• مواصفة CSS Flexible Box Layout Module.