flex-direction

خاصية اتجاه الصندوق المرن flex-direction

خاصية flex-direction تحدد محور حاوية flex: صف أفقي (الافتراضي) أو عمود رأسي — ومعها ينقلب عمل justify وalign.

حاوية flex صف أفقي افتراضيًا (row)؛ بقيمة column تصبح عمودًا رأسيًا — قوائم الجوال، البطاقات المكدسة، النماذج. اللحظة المفصلية للفهم: **المحور الرئيسي ينقلب معها** — في column تصبح justify-content رأسية وalign-items أفقية. من يستوعب هذا الانقلاب ينتهي عنده «التخمين العشوائي» بين الخاصيتين للأبد.

مع الشاشات: النمط الأشهر صفوف على الشاشات الواسعة وعمود على الجوال عبر media query.

الصياغة

.container {
  display: flex;
  flex-direction: column; /* row | row-reverse | column-reverse */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .demo { display: flex; gap: 8px; background: #ede9fe; padding: 10px; border-radius: 10px; margin-bottom: 8px; }
  .demo span { background: #7c5cff; color: white; padding: 8px 14px; border-radius: 8px; }
  .col { flex-direction: column; }
</style>
<div class="demo"><span>صف 1</span><span>2</span><span>3</span></div>
<div class="demo col"><span>عمود 1</span><span>2</span><span>3</span></div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
row	الافتراضي: صف بطول اتجاه الكتابة (يحترم RTL)
column	عمود من الأعلى للأسفل — ومعه ينقلب المحور الرئيسي
row-reverse / column-reverse	عكس ترتيب العرض بلا تغيير HTML

💡 نصائح عملية

احفظ الانقلاب: مع column صارت justify-content رأسية وalign-items أفقية
reverse يغير العرض البصري فقط — ترتيب قراءة الشاشة يبقى بترتيب HTML

⚠️ أخطاء شائعة

تدوير justify/align عشوائيًا عند column بدل فهم انقلاب المحور
الاعتماد على reverse لترتيب منطقي مهم — يخلق فجوة وصولية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs