Flexbox: المحاور، justify/align، gap، flex-grow

أتقِن محوري Flexbox لمحاذاة عناصرك وتوسيطها وتوزيعها في التخطيطات اليومية.

9 دقيقة · 3 أسئلة

شريط تنقّل، صفّ من البطاقات، نموذج مُحاذى: Flexbox هو الأداة اليومية للتخطيط أحادي البُعد. يقوم كل شيء على محورين: المحور الرئيسي (يحدّده flex-direction، وهو أفقي افتراضياً) والمحور المتقاطع العمودي على الأول. يوزّع justify-content العناصر على طول المحور الرئيسي؛ ويحاذي align-items العناصر على المحور المتقاطع. تذكّر هذا الثنائي: فهو يحلّ أغلب الحالات. لنأخذ شريط تنقّل كلاسيكياً.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

بضعة تصريحات تحوّل هذه القائمة إلى شريط احترافي: يدفع space-between الشعار إلى اليسار والزر إلى اليمين، ويحاذي align-items: center عمودياً عناصر بارتفاعات مختلفة، ويباعد gap بين الروابط دون هوامش تُدار.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

تمرين ذهني: إذا حوّلت .navbar إلى flex-direction: column، فماذا يفعل justify-content: space-between؟ إنه الآن يوزّع العناصر عمودياً، لأن المحور الرئيسي قد دار. هذا هو فخّ Flexbox الكلاسيكي: justify-content وalign-items لا يعنيان «أفقي» و«عمودي»، بل «المحور الرئيسي» و«المحور المتقاطع». وحالة استخدام أخرى لا بد من معرفتها: توسيط المحتوى توسيطاً تاماً.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

يوزّع flex-grow المساحة الحرة المتبقّية بين العناصر. حالة ملموسة: تخطيط بشريط جانبي ثابت ومحتوى يملأ كل ما تبقّى. يثبّت flex: 0 0 240px الشريط الجانبي (فلا يكبر ولا يصغر)، بينما يترك flex-grow: 1 المحتوى يمتصّ كل المساحة المتاحة.

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. مع flex-direction: column، ماذا يتحكّم فيه justify-content؟
   • المحاذاة الأفقية للعناصر
   • المحاذاة العمودية، لأن المحور الرئيسي أصبح عمودياً
   • المباعدة بين أسطر النص
2. أيّ تركيبة توسّط عنصراً أفقياً وعمودياً في حاوية مرنة؟
   • text-align: center وvertical-align: middle
   • justify-content: center وalign-items: center
   • margin: 0 auto على الحاوية
3. في حاوية مرنة، لدى .a القيمة flex-grow: 2 ولدى .b القيمة flex-grow: 1. ماذا يحدث؟
   • يكون .a دائماً بعرض ضعف .b بالضبط
   • يتلقّى .a ضعف ما يتلقّاه .b من المساحة الحرة المتبقّية
   • يُخفى .b لصالح .a