CSS Academy · درس

Display وFlex وFlex Direction

فعّل flexbox في حاوية، وتحكّم في اتجاه المحور الرئيسي باستخدام flex-direction.

Display وFlex وFlex Direction درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

تفعيل Flexbox

يُفعَّل Flexbox بتعيين display: flex على عنصر حاوية (حاوية flex). وتصبح عناصره الابنة المباشرة تلقائيًا عناصر flex.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex مضمن

ينشئ display: inline-flex حاوية flex تتدفق ضمن السطر (مثل inline-block) بدلًا من تدفقها كعنصر كتلي. ويظل سلوك Flexbox الداخلي نفسه.

<p>Status: <span class="badge">🔥 Trending</span></p>

المحور الرئيسي والمحور المتقاطع

يحتوي Flexbox على محورين:

المحور الرئيسي: الاتجاه الأساسي الذي تُرتَّب فيه العناصر
المحور المتقاطع: الاتجاه العمودي على المحور الرئيسي

تشير جميع خصائص flex إلى هذين المحورين، لا إلى اتجاهات ثابتة.

flex-direction: row (الافتراضي)

الاتجاه الافتراضي هو row: توضع العناصر من اليسار إلى اليمين على المحور الرئيسي الأفقي.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

ترتّب flex-direction: column العناصر رأسيًا. ويصبح المحور الرئيسي رأسيًا، بينما يصبح المحور المتقاطع أفقيًا.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

يعكس row-reverse الاتجاه الأفقي، فتوضع العناصر من اليمين إلى اليسار. وتكون بداية المحور الرئيسي على اليمين.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

ترتّب column-reverse العناصر من الأسفل إلى الأعلى. ويظهر العنصر الأخير في الأعلى.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

يؤثر flex-direction في جميع خصائص flex

عند تغيير flex-direction، يتغير اتجاه justify-content أيضًا. فإذا كان الاتجاه هو column، فستحاذي justify-content العناصر على المحور الرأسي، لا الأفقي.

تخطيط أفقي بسيط

أبسط حالات استخدام flexbox — توسيط العناصر في شريط تنقل:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

تخطيط رأسي بسيط

توسيط محتوى بطاقة رأسيًا وأفقيًا:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

الاختصار flex-flow

يُعد flex-flow اختصارًا لـ flex-direction وflex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

تحقق سريع

عند تعيين flex-direction: column، ما المحور الذي تتحكم فيه justify-content؟

مراجعة

عيّن display: flex على حاوية لإنشاء سياق flex لعناصرها الابنة. ويحدد flex-direction اتجاه المحور الرئيسي: row (أفقي) أو column (رأسي). وترتبط جميع خصائص محاذاة flex بهذه المحاور، لا باتجاهات ثابتة مثل اليسار واليمين والأعلى والأسفل.

الأسئلة الشائعة

هل درس «Display وFlex وFlex Direction» مجاني؟

نعم — نص درس «Display وFlex وFlex Direction» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Display وFlex وFlex Direction»؟

فعّل flexbox في حاوية، وتحكّم في اتجاه المحور الرئيسي باستخدام flex-direction. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Display وFlex وFlex Direction»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy