شرح خاصية align-items في CSS لتنسيق العناصر داخل الحاوية

📐 دليلك الشامل لخاصية align-items في CSS: تحكم في المحاذاة العمودية بسهولة!

اليوم سنتعرف على واحدة من أهم الخصائص في نموذج Flexbox، وهي خاصية align-items. إذا كنت تتذكر درس justify-content الذي يتحكم في المحاذاة على المحور الرئيسي (الأفقي عادةً)، فإن align-items هي شقيقته التي تتحكم في المحاذاة على المحور العرضي (Cross Axis)، وهو المحور العمودي في معظم الحالات. هيا بنا نكتشف كيف تجعل عناصرك تتماشى بشكل مثالي! ✨

ما هي خاصية align-items؟

خاصية align-items هي خاصية CSS تُطبَّق على الحاوية المرنة (Flex Container). وظيفتها الأساسية هي تحديد كيفية توزيع ومحاذاة العناصر الفرعية (Flex Items) داخل تلك الحاوية على المحور العرضي. ببساطة، تتحكم في مكان وضع العناصر من الأعلى إلى الأسفل (أو من اليمين إلى اليسار إذا كان اتجاه الحاوية عمودياً).

تخيل صفاً من الصناديق داخل حاوية طويلة. justify-content تتحكم في هل ستكون الصناديق على اليسار، الوسط، أو اليمين (أفقيًا). بينما align-items تتحكم في هل ستتمدد الصناديق لتملأ ارتفاع الحاوية بالكامل، أم ستتجمع في الأعلى، أم في المنتصف، أم في الأسفل (عموديًا).

قيم خاصية align-items الأساسية

لنفهم كيفية عمل align-items، علينا أولاً أن ننشئ هيكلاً بسيطاً. سننشئ حاوية مرنة (div) بداخلها ثلاثة عناصر فرعية.

الهيكل الأساسي (HTML):

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

التنسيق الأساسي (CSS):

.container {
  display: flex; /* نجعل الحاوية مرنة */
  height: 300px; /* نعطي الحاوية ارتفاعاً محدداً لنرى التأثير */
  background-color: #f0f0f0;
  border: 2px solid #333;
}

.item {
  width: 80px;
  background-color: #4CAF50;
  color: white;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center; /* لمركزة النص داخل كل عنصر */
  font-size: 24px;
}

الآن، لنطبق القيم المختلفة لـ align-items على الحاوية .container:

1. stretch (القيمة الافتراضية) 🔽

هذه هي القيمة الافتراضية إذا لم تحدد أي قيمة. تجعل العناصر الفرعية تتمدد لتملأ ارتفاع الحاوية بالكامل على المحور العرضي (ما لم يكن للعنصر ارتفاع height محدد مسبقاً).

.container {
  align-items: stretch;
}

في هذا المثال، ستأخذ الصناديق الخضراء (item) ارتفاع الحاوية بالكامل (300px) لأننا لم نحدد لها height.

2. flex-start (أو start) 🔼

تضع العناصر الفرعية في بداية المحور العرضي للحاوية. إذا كان اتجاه الحرارة أفقيًا (flex-direction: row)، فسيتم محاذاة العناصر إلى أعلى الحاوية.

.container {
  align-items: flex-start;
}

ستلاحظ أن الصناديق الخضراء قد تجمعت في الجزء العلوي من الحاوية الرمادية.

3. center ⏺️

تضع العناصر الفرعية في منتصف المحور العرضي للحاوية. هذه من أكثر القيم استخداماً لمركزة العناصر عمودياً.

.container {
  align-items: center;
}

سترى الآن أن الصناديق الثلاثة أصبحت في منتصف الحاوية من الأعلى إلى الأسفل. مثالية لأزرار التنقل أو العناصر التي تريد أن تظهر في المنتصف.

4. flex-end (أو end) 🔽

تضع العناصر الفرعية في نهاية المحور العرضي للحاوية. إذا كان الاتجاه أفقيًا، فسيتم محاذاة العناصر إلى أسفل الحاوية.

.container {
  align-items: flex-end;
}

ستلاحظ أن الصناديق قد انتقلت إلى الحافة السفلية للحاوية.

5. baseline 📏

هذه قيمة خاصة. تحاذي العناصر الفرعية بناءً على خط الأساس (baseline) للنص الموجود داخل كل عنصر. ستبدو جميع العناصر وكأنها مكتوبة على نفس السطر، بغض النظر عن ارتفاعها أو حجم الخط الداخلي.

لتوضيح ذلك، لنغير أحجام الخطوط في العناصر:

.item:nth-child(1) { font-size: 16px; padding-top: 20px;}
.item:nth-child(2) { font-size: 32px; }
.item:nth-child(3) { font-size: 24px; padding-bottom: 20px;}

الآن نطبق baseline:

.container {
  align-items: baseline;
}

ستلاحظ أن أسطر النص (الأرقام 1، 2، 3) أصبحت جميعها على استواء واحد، حتى وإن اختلفت ارتفاعات الصناديق نفسها. هذه القيمة مفيدة في تنسيق عناصر القوائم أو العناوين ذات الأحجام المختلفة.

مثال عملي متكامل: شريط تنقل بسيط 🧭

لنرى كيف يمكن لـ align-items: center; أن تكون مفيدة في تصميم واقعي. سننشئ شريط تنقل بسيط.

<nav class="navbar">
  <div class="logo">شعار الموقع</div>
  <a href="#">الرئيسية</a>
  <a href="#">من نحن</a>
  <a href="#">اتصل بنا</a>
</nav>

.navbar {
  display: flex;
  align-items: center; /* السحر هنا! يمركز كل العناصر عمودياً */
  justify-content: space-around; /* يوزع المساحة حول العناصر */
  background-color: #333;
  padding: 0 20px;
  height: 60px;
}

.logo {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

بفضل align-items: center، تم محاذاة الشعار وروابط التنقل جميعاً في منتصف ارتفاع شريط التنقل (60px)، مما يمنحه مظهراً مرتباً واحترافياً.

ملخص سريع 🎓

• align-items: تتحكم في محاذاة العناصر على المحور العرضي (عمودي عادةً).
• تطبق على الحاوية: دائماً نضعها داخل الحاوية المرنة (الـ flex container).
• القيم الشائعة:
  • stretch: (افتراضي) تمتد العناصر لتملأ الحاوية.
  • flex-start: محاذاة إلى بداية المحور (أعلى).
  • center: مركزة العناصر في المنتصف. ⭐ الأكثر استخداماً!
  • flex-end: محاذاة إلى نهاية المحور (أسفل).
  • baseline: محاذاة بناءً على خط أساس النص.