الفرق بين المراجعتين لصفحة: «CSS/flex-flow»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>flex-flow</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>flex-flow</code>}}</noinclude> | ||
الخاصية <code>flex-wrap</code> المختصرة في CSS تستعمل لضبط قيمة الخاصيتين <code>[[CSS/flex-direction|flex-direction]]</code> و <code>[[CSS/flex-wrap|flex-wrap]]</code>. | الخاصية <code>flex-wrap</code> المختصرة في CSS تستعمل لضبط قيمة الخاصيتين <code>[[CSS/flex-direction|flex-direction]]</code> و <code>[[CSS/flex-wrap|flex-wrap]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 45: | سطر 25: | ||
* <code>[[CSS/flex-wrap|flex-wrap]]</code>: كما حُدِّدَت. | * <code>[[CSS/flex-wrap|flex-wrap]]</code>: كما حُدِّدَت. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* 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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 70: | سطر 71: | ||
تقبل الخاصية <code>flex-flow</code> قيمةً واحدةً أو قيمتين من القيم التالية. | تقبل الخاصية <code>flex-flow</code> قيمةً واحدةً أو قيمتين من القيم التالية. | ||
=== | === <code><flex-direction></code> === | ||
تُعرِّف هذه القيمة ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه. راجع صفحة الخاصية <code>[[CSS/flex-direction|flex-direction]]</code> لمزيدٍ من المعلومات. | تُعرِّف هذه القيمة ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه. راجع صفحة الخاصية <code>[[CSS/flex-direction|flex-direction]]</code> لمزيدٍ من المعلومات. | ||
=== | === <code><flex-wrap></code> === | ||
تُحدِّد هذه الخاصية فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر. راجع صفحة الخاصية <code>[[CSS/flex-wrap|flex-wrap]]</code> لمزيدٍ من المعلومات. | تُحدِّد هذه الخاصية فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر. راجع صفحة الخاصية <code>[[CSS/flex-wrap|flex-wrap]]</code> لمزيدٍ من المعلومات. | ||
| سطر 81: | سطر 82: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/flex|flex]]</code> صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/flex-basis|flex-basis]]</code>، و <code>[[CSS/flex-direction|flex-direction]]</code>، و <code>[[CSS/flex-grow|flex-grow]]</code>، و <code>[[CSS/flex-shrink|flex-shrink]]</code>، و <code>[[CSS/flex-wrap|flex-wrap]]</code>. | |||
* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر. | |||
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [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}}]] | ||
المراجعة الحالية بتاريخ 08:38، 25 يوليو 2018
الخاصية 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.