54. خاصية حاوية Flex: align-items (المحور المتقاطع)
تتحكم align-items في كيفية تموضع أو تمدد عناصر flex على طول المحور المتقاطع (المتعامد على المحور الرئيسي).
إذا كان الاتجاه هو row ، فإن المحور المتقاطع يكون عمودياً، وتتحكم align-items في المحاذاة الرأسية.
| القيمة | الوصف |
|---|---|
stretch (افتراضي) | تتمدد العناصر لملء الحاوية على المحور المتقاطع (تحترم min-height/max-height). |
flex-start | يتم محاذاة العناصر في بداية المحور المتقاطع. |
flex-end | يتم محاذاة العناصر في نهاية المحور المتقاطع. |
center | يتم توسيط العناصر على المحور المتقاطع. |
baseline | يتم محاذاة العناصر بناءً على خط الأساس الخاص بها (خط النص). |
مثال: التوسيط الرأسي المثالي
هذه حركة قوية كلاسيكية في Flexbox: توسيط عنصر أفقياً ورأسياً في نفس الوقت.
css .centered-parent { display: flex; height: 400px;
/* 1. التوسيط على طول المحور الرئيسي (أفقي) */ justify-content: center;
/* 2. التوسيط على طول المحور المتقاطع (عمودي) */ align-items: center; }
ملاحظة: align-items: stretch هي القيمة الافتراضية، وهذا هو سبب أن عناصر flex التي لا تحتوي على ارتفاع محدد تبدو غالباً بنفس ارتفاع حاويتها.