في هذا الدرس 5تصفّح المواضيع
بينما توضع خاصية align-items على الحاوية المرنة لمحاذاة جميع الأبناء دفعةً واحدة على المحور المتعامد، تحتاج الواجهات العملية كثيراً إلى استثناء بطاقة مميزة أو زر إجراء أو شارة حالة عن بقية المجموعة. تُكتب خاصية align-self مباشرة على العنصر المرن المستهدف لتتجاوز قاعدة align-items المحددة على الأب.
في الصف الأفقي flex-direction: row يمتد المحور المتعامد عمودياً فتحرك align-self ذلك العنصر للأعلى أو للأسفل أو للمنتصف الرأسي؛ أما في العمود الرأسي flex-direction: column فيصبح المحور المتعامد أفقياً فتتحكم في تموضعه يميناً أو يساراً أو وسطاً.
يبدأ كل عنصر مرن افتراضياً بالقيمة align-self: auto؛ وعند حساب الأنماط تنسخ القيمة auto قرار خاصية align-items المطبقة على الحاوية الأب، والتي تكون افتراضياً stretch.
تبرز فائدة كتابة align-self: stretch صراحةً عندما تستخدم الحاوية الأب align-items: center أو align-items: flex-start، إذ تسمح لبطاقة مميزة أو خط فاصل وحيد بالتمدد على كامل ارتفاع السطر بشرط بقاء بُعده المتعامد مثل height على القيمة auto.
.bar-row {
display: flex;
align-items: center;
height: 130px;
}
.tall-divider {
align-self: stretch;
}تتيح ثلاث كلمات موضعية تثبيت العنصر المرن عند نقطة محددة على المحور المتعامد مع الاكتفاء بارتفاع محتواه الطبيعي دون تمدد:
- القيمة
align-self: flex-start— تدفع العنصر إلى بداية المحور المتعامد أي الحافة العلوية في الصف القياسي. - القيمة
align-self: center— توسط العنصر تماماً في منتصف المحور المتعامد. - القيمة
align-self: flex-end— تدفع العنصر إلى نهاية المحور المتعامد أي الحافة السفلية في الصف أو الحافة الجانبية في العمود.
.step-top {
align-self: flex-start;
}
.step-mid {
align-self: center;
}
.step-bot {
align-self: flex-end;
}Interactive Lab — CSS Align Selfمختبر تفاعلي — استثناء العنصر بـ align-self
عند اشتراك عنصرين أو أكثر داخل صف في القيمة align-self: baseline، يطابق المتصفح خط القاعدة الطباعي لسطور نصوصهم الأولى، وهو حل مثالي لمحاذاة رقم سعر كبير بحجم 28px مع رمز عملة أصغر بحجم 14px على استقامة بصرية واحدة.
أما على المحور الرئيسي فلا يتضمن نظام Flexbox خاصية باسم justify-self إطلاقاً لأن العناصر تتشارك المحور الرئيسي معاً؛ وبدلاً منها تُعتمد الهوامش التلقائية مثل margin-left: auto أو margin-right: auto لامتصاص الفراغ ودفع زر الدخول منفرداً نحو أقصى طرف شريط التنقل.
.price-big {
font-size: 28px;
align-self: baseline;
}
.cta-end {
align-self: center;
margin-left: auto;
}في أدوات المطور DevTools يمكنك النقر على أيقونة المحاذاة البصرية بجانب align-self في تبويب Styles أو مراجعة تبويب Computed للتأكد مما إذا كان العنصر يرث محاذاة الأب أم يطبق استثناءً خاصاً. يجمع الجدول المرجعي الآتي القيم الست القياسية وأولويتها.
| القيمة | الأثر على المحور المتعامد | الأولوية مقابل align-items |
|---|---|---|
align-self: auto | يرث قيمة align-items من الحاوية الأب | يتبع قاعدة الأب افتراضياً |
align-self: stretch | يمتد لطول السطر المتعامد بشرط بقاء البُعد auto | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: flex-start | يدفع العنصر إلى بداية المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: center | يوسط العنصر في منتصف المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: flex-end | يدفع العنصر إلى نهاية المحور المتعامد | يتجاوز قاعدة الأب للعنصر المحدد |
align-self: baseline | يطابق خط القاعدة النصي الأول مع نظرائه | يتجاوز قاعدة الأب للعنصر المحدد |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت تخصيص محاذاة عنصر مرن منفرد على المحور المتعامد عبر قيم align-self الست من auto وstretch إلى الحواف والمنتصف وbaseline، مع معرفة الاعتماد على الهوامش التلقائية على المحور الرئيسي. وفي الخطوة التالية ننتقل إلى درس خاصية flex في لغة CSS لجمع أركان التحجيم المرن الثلاثة في اختصار احترافي واحد.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Cross-Axis Item Override استثناء المحاذاة المتعامدة
- استخدام خاصية align-self على عنصر مرن واحد لتجاوز قاعدة align-items المشتركة للحاوية.
- للمراجعة
- 02 Auto Alignment Lookup الوراثة التلقائية بقيمة auto
- الحالة الابتدائية align-self auto التي يتبنى فيها الابن المرن إعداد المحاذاة المحدد على الحاوية الأب.
- للمراجعة
- 03 Typographic Baseline Alignment محاذاة خط القاعدة الطباعي
- صف العناصر ذات أحجام الخطوط المختلفة على الخط الوهمي الذي تستقر عليه حروف سطرها الأول.
- للمراجعة
- 04 Main-Axis Auto Margin الهامش التلقائي على المحور الرئيسي
- اعتماد margin-left auto أو margin-right auto لدفع عنصر منفرد على المحور الرئيسي لغياب خاصية فردية مخصصة له.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة أوراق الأنماط المتتالية التي تنظم خصائص المحاذاة الجماعية والفردية في الصندوق المرن.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه الكتابة من اليمين إلى اليسار كاللغة العربية حيث تنعكس بداية ونهاية المحور الرئيسي أفقياً.
- للمراجعة
- 03 CTA CTA
- Call To Action
- أزرار الدعوة للإجراء التي تُنسق غالباً بقيم align-self أو بالهوامش التلقائية داخل الأشرطة المرنة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
داخل صف مرن بارتفاع 150px طبّق القيم flex-start و center و flex-end على ثلاث بطاقات متجاورة.
-
اضبط السعر ووحدة العملة على align-self baseline ثم امنح الزر align-self center مع margin-left auto.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.