الخاصية flex-flow
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية 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
التي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مواصفة CSS Flexible Box Layout Module.