الفرق بين المراجعتين ل"CSS/flex-flow"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 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> التي تصف كيف يجب أن يتموضع العنصر في المستند. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 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.