الخاصية flex-flow
< CSS
الخاصية 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. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | لكل قيمة مختصرة:
|
أمثلة
راجع صفحة الخاصيتين 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.