خاصية الاختصار Flex Flow
آخر تحديث: 2026-09-13
flex-flow خاصية الاختصار Flex Flow
flex-flow هو اختصار للخصائص flex-direction و flex-wrap. يحدد اتجاه المحور الرئيسي وما إذا كانت العناصر تلتف في إعلان واحد. وبما أن الخاصيتين تُستخدمان معًا دائمًا تقريبًا، فإن flex-flow يحافظ على الكود أكثر إيجازًا. قيمته الافتراضية هي row nowrap، أي ترتيب أفقي دون التفاف.
| الفئة | |
|---|---|
| القيمة الأولية | row nowrap |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-flow: <flex-direction> || <flex-wrap>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<flex-direction> || <flex-wrap> | القيمة | اختصار للاتجاه والالتفاف |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-flow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يمكن كتابة قيمتي flex-flow بأي ترتيب: flex-flow: wrap column يكافئ flex-flow: column wrap. ويتعرف المتصفح على كلتا الصيغتين.
تلميح： وبما أن flex-direction و flex-wrap تُضبطان معًا دائمًا تقريبًا، فمن الأفضل استخدام الاختصار flex-flow لقراءة أفضل وكتابة أسرع.
❓ الأسئلة الشائعة
Qهل يمكن لـ flex-flow أن يحتوي على قيمة واحدة فقط؟
Aنعم. مع قيمة واحدة، يقرر المتصفح بناءً على نوعها: قيمة اتجاه مثل row أو column تبقي flex-wrap على القيمة الافتراضية nowrap، بينما قيمة التفاف مثل wrap أو nowrap تبقي flex-direction على القيمة الافتراضية row. هذا السلوك مُعرّف في المواصفات، لذا نادرًا ما تحتاج إلى كتابة القيمتين عندما تطابق إحداهما القيمة الافتراضية بالفعل.
Qهل هناك فرق في الأداء بين flex-flow وبين ضبط flex-direction و flex-wrap بشكل منفصل؟
Aلا. flex-flow هو مجرد اختصار نحوي: بعد التحليل، يكون له نفس التأثير تمامًا لو كُتب flex-direction و flex-wrap بشكل منفصل. والاختيار مسألة أسلوب كتابة. عند ضبط المعنيين معًا، يكون flex-flow أكثر إيجازًا؛ وعند الحاجة إلى تجاوز خاصية واحدة، مثل تغيير الالتفاف فقط داخل media query، تكون الصيغة الكاملة أسهل للتعديل الموضعي.
Qهل هناك فرق بين flex-flow: column wrap و flex-flow: wrap column؟
Aلا. flex-flow هو اختصار لـ flex-direction و flex-wrap، وتستخدم المواصفات || للإشارة إلى أن القيمتين يمكن كتابتهما بأي ترتيب، لذا فإن column wrap و wrap column متكافئتان. وهذا الترتيب القابل للتبديل مجرد تسهيل نحوي في قواعد الاختصار؛ ولا يؤثر على القيم المحسوبة ولا على الأداء. لاحظ أنه مع محور رئيسي من نوع column، يحدث الالتفاف في الاتجاه الأفقي وتتراص الأعمدة الجديدة إلى اليمين.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
اتجاه المحور الرئيسي
يحدد اتجاه المحور الرئيسي في تخطيط flex
Flex Wrap
يتحكم فيما إذا كانت عناصر flex تلتف إلى عدة أسطر
