CSS Academy · درس

Justify-Content وAlign-Items

وزّع العناصر على المحور الرئيسي والمحور المتقاطع باستخدام justify-content وalign-items.

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

خاصيتا المحاذاة الأساسيتان

أكثر خاصيتي محاذاة flex استخدامًا هما:

justify-content — تحاذي العناصر على طول المحور الرئيسي
align-items — تحاذي العناصر على طول المحور المتقاطع

justify-content: flex-start

تكدّس flex-start (الافتراضية) العناصر باتجاه بداية المحور الرئيسي. وفي اتجاه row، تصطف العناصر إلى اليسار.

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

justify-content: center

توسّط العناصر على المحور الرئيسي. وهي الطريقة التقليدية لتوسيط العناصر أفقيًا باستخدام flexbox.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

تكدّس العناصر باتجاه نهاية المحور الرئيسي (الجهة اليمنى في اتجاه row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

توزّع العناصر مع مسافات متساوية بينها. ويكون العنصر الأول عند البداية، والأخير عند النهاية، من دون مسافة عند الحافتين.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

تضع مسافات متساوية حول كل عنصر. وتحصل العناصر عند الحافتين على نصف المسافة الموجودة بين العناصر الداخلية. وبصريًا، تكون المسافة عند الحافتين نصف المسافة بين العناصر.

justify-content: space-evenly

تكون جميع الفجوات (بما فيها الفجوات عند الحافتين) متساوية. وبخلاف space-around، تساوي المسافة عند الحافتين الفجوات بين العناصر.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (الافتراضي)

تجعل stretch (الافتراضية) جميع عناصر flex على المحور المتقاطع تملأ حجم الحاوية على المحور المتقاطع. لذلك تصبح العناصر في حاوية صف بالارتفاع نفسه.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

توسّط العناصر على المحور المتقاطع. وفي حاوية صف، يؤدي ذلك إلى توسيط العناصر رأسيًا. وهي الطريقة التقليدية للتوسيط الرأسي.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start وflex-end

تحاذي flex-start العناصر مع حافة بداية المحور المتقاطع (الأعلى في الصف). وتحاذي flex-end العناصر مع حافة نهاية المحور المتقاطع (الأسفل في الصف).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

تحاذي العناصر بحيث تتطابق خطوط أساس النصوص فيها. ويكون ذلك مفيدًا عندما تختلف أحجام خطوط العناصر، لكن يُراد لها أن تبدو مصطفة بصريًا.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

تحقق سريع

ما المجموعة التي توسّط عنصر flex أفقيًا ورأسيًا بشكل كامل داخل حاويته؟

مراجعة

توزّع justify-content العناصر على المحور الرئيسي باستخدام قيم مثل flex-start وcenter وspace-between. وتضع align-items العناصر على المحور المتقاطع باستخدام قيم مثل stretch وcenter وflex-start. وتتحكم الخاصيتان معًا في المحاذاة على كلا المحورين.

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

هل درس «Justify-Content وAlign-Items» مجاني؟

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

ماذا ستتعلم في «Justify-Content وAlign-Items»؟

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

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

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

كم من الوقت يستغرق درس «Justify-Content وAlign-Items»؟

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

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

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

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

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