الفرق بين المراجعتين لصفحة: «CSS/flex-flow»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 84: | سطر 84: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-flow-property CSS Flexible Box Layout Module]. | * مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-flow-property CSS Flexible Box Layout Module]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Flexbox]] | [[تصنيف:CSS Flexbox|{{SUBPAGENAME}}]] | ||
مراجعة 15:36، 28 يناير 2018
الخاصية 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.