خاصية اتجاه المحور الرئيسي
آخر تحديث: 2026-09-13
flex-direction خاصية اتجاه المحور الرئيسي
تُعرّف الخاصية flex-direction اتجاه المحور الرئيسي في حاوية flex، أي الاتجاه الذي تُرتّب به عناصر flex. افتراضيًا، تُرتّب العناصر أفقيًا من اليسار إلى اليمين (row). يمكن لهذه الخاصية تبديل التخطيط إلى عمودي أو إلى ترتيب معكوس. إنها أبسط عناصر التحكم في الاتجاه في flexbox وتحدد أي محور يؤثر عليه justify-content و align-items.
| الفئة | |
|---|---|
| القيمة الأولية | row |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-direction: row | row-reverse | column | column-reverse;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
row | row-reverse | column | column-reverse | كلمة مفتاحية | اتجاه المحور الرئيسي لـ flex. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-direction | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： ترتّب row و row-reverse العناصر على محور رئيسي أفقي؛ بينما تستخدم column و column-reverse محورًا رئيسيًا عموديًا. وعند تغيّر المحور الرئيسي، تتبدل المحاور التي يسيطر عليها justify-content و align-items تبعًا لذلك.
مهم： تُغيّر row-reverse و column-reverse الترتيب المرئي للعناصر فقط، لا ترتيب DOM، لذا لا يتأثر ترتيب القراءة بقارئ الشاشة ولا ترتيب التركيز بمفتاح Tab.
❓ الأسئلة الشائعة
Qكيف يتصرف justify-content و align-items عند تغيّر flex-direction؟
Aتُعرّف flex-direction المحور الرئيسي: يعمل justify-content على المحور الرئيسي و align-items على المحور المتقاطع. مع row، يتحكم justify-content في المحاذاة الأفقية و align-items في الرأسية؛ وبعد التبديل إلى column تتبدل المحاور. نتيجة عملية: مع column، يحتاج justify-content إلى ارتفاع محدد للحاوية ليوزّع المساحة، تمامًا كما يحتاج align-items إلى فضاء متقاطع متبقٍ مع row. أكّد دائمًا اتجاه المحور الرئيسي أولًا، لأنه يحدد أي خاصية محاذاة تتحكم في أي اتجاه.
Qكيف أنشئ تخطيطًا من اليمين إلى اليسار؟
Aهناك طريقتان. تجعل flex-direction: row-reverse عناصر flex تُرتّب من اليمين إلى اليسار وتؤثر فقط على تلك المجموعة من العناصر. أما ضبط direction: rtl على الحاوية فيغيّر اتجاه الكتابة والتخطيط، فيتبع النص والعناصر المضمّنة ذلك أيضًا. يتشابه الاثنان بصريًا لكنهما يختلفان دلاليًا: فضّل row-reverse عندما يُقلب التخطيط فقط، واستخدم direction: rtl عندما يجب أن يتغير اتجاه النص أيضًا.
Qما الفرق بين flex-direction: column و writing-mode الرأسي؟
Aهما مختلفان تمامًا. flex-direction: column تكتفي بتكديس عناصر flex عموديًا؛ يبقى كل عنصر كتلة مستقلة ولا يتغير اتجاه النص، لذا يبقى النص الداخل مقروءًا في أسطر أفقية. أما writing-mode: vertical-rl فتغيّر طريقة كتابة النص نفسه لتسري الأحرف عموديًا. استخدم flex-direction: column للتخطيطات العمودية و writing-mode فقط للطباعة الرأسية للنص مثل الأعمدة الصينية التقليدية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
Flex Wrap
يتحكم فيما إذا كانت عناصر flex تلتف إلى عدة أسطر.
اختصار Flex Flow
اختصار لـ flex-direction و flex-wrap.
