1. تحدد السمة align-self محاذاة العناصر المرنة بشكل فردي في اتجاه المحور الجانبي (المحور الرأسي).
2. يحتوي align-self على قيمة تلقائية إضافية (قيمة افتراضية)، والتي تمثل قيمة سمة align-items الموروثة من الحاوية المرنة.
مثال
.حاوية{
/* تعريف الحاوية المرنة */
العرض: فليكس؛
/*
ضبط اتجاه ترتيب العناصر داخل صف الحاوية: تحديد اتجاه الترتيب من اليسار إلى اليمين، الصف العكسي: من العمود الأيمن إلى اليسار: من الأعلى إلى الأسفل، العمود العكسي: من الأسفل إلى الأعلى
*/
الاتجاه المرن: صف؛
/*
ضبط محاذاة العناصر في الحاوية على امتداد المحور المتقاطع: عندما لا يتم تعيين ارتفاع العنصر، سيتم تمديد ارتفاع العنصر إلى نفس ارتفاع الحاوية (افتراضي)
البدء المرن: نحو موضع البداية (أعلى / يسار) على المحور المتقاطع. محاذاة النهاية المرنة: نحو موضع النهاية (أسفل / يمين) على المحور المتقاطع: مركز المحاذاة المركزي: تأكد من أن النص في العنصر في نفس الوقت خط الأساس (تأكد من أن كل النص موجود على نفس السطر).
*/
محاذاة العناصر: خط الأساس؛
الارتفاع: 800upx؛
لون الخلفية: #FFC0CB؛
}
.رسالة قصيرة{
حجم الخط: 20 بكسل؛
العرض: 150upx؛
الارتفاع: 150upx؛
}
.أحمر{
لون الخلفية: أحمر؛
/*
أعد كتابة محاذاة العناصر الموجودة في الحاوية على المحور المتقاطع تلقائيًا: افتراضي، مما يشير إلى وراثة خاصية محاذاة العناصر الخاصة بامتداد العنصر الأصلي: عندما لا يتم تعيين ارتفاع العنصر، سيتم تمديد ارتفاع العنصر إلى نفس المستوى الارتفاع كحاوية (افتراضي)
البدء المرن: نحو موضع البداية (أعلى / يسار) على المحور المتقاطع. محاذاة النهاية المرنة: نحو موضع النهاية (أسفل / يمين) على المحور المتقاطع: مركز المحاذاة المركزي: تأكد من أن النص في العنصر في نفس الوقت خط الأساس (تأكد من أن كل النص موجود على نفس السطر).
*/
محاذاة الذات: مركز؛
}
.أخضر{
لون الخلفية: أخضر؛
}
.أزرق{
لون الخلفية: أزرق؛
}ما ورد أعلاه هو مقدمة للسمة align-self في CSS وآمل أن تكون مفيدة للجميع.