63. خاصية عنصر Flex: align-self (المحاذاة الفردية على المحور المتقاطع)

بينما تضبط align-items (على الحاوية) المحاذاة الافتراضية لـ جميع العناصر على طول المحور المتقاطع، تسمح لك align-self بإلغاء تلك المحاذاة لـ عنصر flex واحد فقط.

القيم المتاحة

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

• auto (ترث من align-items)
• flex-start
• flex-end
• center
• stretch
• baseline

مثال: إلغاء المحاذاة

إذا تم ضبط الحاوية لتوسيط العناصر رأسياً، ولكنك تريد عنصراً واحداً محدداً ليكون في الأسفل:

css .flex-container { display: flex; height: 200px; align-items: center; /* الافتراضي: جميع العناصر متوسطة رأسياً */ }

.item-special { align-self: flex-end; /* يلغي الأب ويسحب هذا العنصر للأسفل */ background-color: red; }

استخدام شائع: ضبط صورة أو أيقونة داخل صف حيث يتم توسيط النص المحيط.