الفرق بين المراجعتين لصفحة: «CSS/flex-flow»

مراجعة 12:17، 12 يوليو 2018

الخاصية flex-wrap المختصرة في CSS تستعمل لضبط قيمة الخاصيتين flex-direction و flex-wrap.

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: `flex-direction`: `row` `flex-wrap`: `nowrap`
تُطبَّق على	حاويات flex.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل قيمة مختصرة: `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-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.

@@ سطر 82: / سطر 82: @@
 </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> التي تصف كيف يجب أن يتموضع العنصر في المستند.
 == مصادر ومواصفات ==