CSS Academy · درس

تجاوز محاذاة عنصر Flex باستخدام align-self

تجاوز align-items للحاوية بالنسبة إلى عناصر Flex الفردية باستخدام align-self

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

ما هي align-self؟

تتجاوز align-self إعداد align-items لحاوية flex بالنسبة إلى عنصر flex محدد. وهي تُطبَّق على العناصر الفردية، لا على الحاوية.

قيم align-self

تقبل القيم نفسها التي تقبلها align-items:

auto — يرث قيمة align-items من الحاوية (القيمة الافتراضية)
flex-start — يحاذي إلى بداية المحور المتقاطع
flex-end — يحاذي إلى نهاية المحور المتقاطع
center — يوسّط العنصر على المحور المتقاطع
stretch — يمدّد العنصر لملء حجم المحور المتقاطع
baseline — يحاذي خطوط أساس النصوص

مثال عملي

شريط تنقل تكون معظم عناصره في الوسط، بينما يُحاذى الزر الأخير إلى النهاية:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

تمديد عنصر واحد

اجعل بطاقة واحدة تتمدد إلى الارتفاع الكامل، بينما تضبط البطاقات الأخرى حجمها وفق محتواها:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

استخدام margin: auto للمحاذاة

تدفع الهوامش التلقائية في عناصر flex نفسها أو العناصر الشقيقة إلى الجانب المقابل. ويُعدّ ذلك بديلًا قويًا عن align-self لتوسيط المساحة أو توزيعها.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

التوسيط الرأسي باستخدام margin: auto

تعمل الهوامش التلقائية رأسيًا أيضًا. إذ تدفع margin-top: auto داخل حاوية flex عمودية العنصر إلى الأسفل:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

المحاذاة وفق خط الأساس

تحافظ محاذاة العناصر وفق خط أساس النص على علاقات مقروءة بين العناصر ذات الأحجام المختلفة:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (الافتراضي)

تخبر align-self: auto العنصرَ باستخدام قيمة align-items الخاصة بالحاوية. ولا تحتاج إلى تعيين align-self إلا عندما تريد الخروج عن القيمة الافتراضية للحاوية.

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

تذكّر: تعمل align-self دائمًا على المحور المتقاطع. فإذا كانت قيمة flex-direction: column، فسيكون المحور المتقاطع أفقيًا، ولذلك تتحكم align-self في الموضع يمينًا أو يسارًا.

دمج align-self مع flex-grow

نمط شائع: كبّر عنصرًا لملء المساحة، وتجاوز محاذاته على المحور المتقاطع في الوقت نفسه:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

المحاذاة في Grid مقابل Flexbox

تحتوي CSS Grid على كل من align-self (محور الصفوف) وjustify-self (محور الأعمدة) للتحكم الثنائي الأبعاد. أما align-self في Flexbox فتتحكم فقط في المحور المتقاطع؛ لذا استخدم margin: auto للمحور الرئيسي.

تحقق سريع

تحتوي حاوية flex على align-items: center. ويحتاج أحد العناصر إلى المحاذاة في أعلى المحور المتقاطع. ما الخاصية التي ينبغي تعيينها على ذلك العنصر؟

مراجعة

تتجاوز align-self قيمة align-items لحاوية flex بالنسبة إلى العناصر الفردية. استخدمها لكسر نمط المحاذاة لعناصر محددة. وتُعدّ margin: auto أداة مكملة توزّع المساحة المتبقية لدفع العناصر على أي من المحورين.

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

هل درس «تجاوز محاذاة عنصر Flex باستخدام align-self» مجاني؟

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

ماذا ستتعلم في «تجاوز محاذاة عنصر Flex باستخدام align-self»؟

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

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

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

كم من الوقت يستغرق درس «تجاوز محاذاة عنصر Flex باستخدام align-self»؟

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

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

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

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

تجاوز محاذاة عنصر Flex باستخدام align-self
خاصية order وإعادة الترتيب المرئي
أنماط الصيغة المختصرة لـ Flex
تخطيطات Flexbox الشائعة: شريط التنقل والبطاقات والكائن الإعلامي

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