53. خاصية حاوية Flex: justify-content (المحور الرئيسي)
تتحكم justify-content في كيفية توزيع المساحة بين وحول عناصر flex على طول المحور الرئيسي.
| القيمة | الوصف |
|---|---|
flex-start (افتراضي) | يتم حشد العناصر نحو بداية اتجاه flex. |
flex-end | يتم حشد العناصر نحو نهاية اتجاه flex. |
center | يتم توسيط العناصر على طول المحور الرئيسي. |
space-between | يتم توزيع العناصر بالتساوي؛ العنصر الأول ملتصق بالبداية، والعنصر الأخير ملتصق بالنهاية. |
space-around | يتم توزيع العناصر بالتساوي مع مساحة متساوية حولها (مما يؤدي إلى مساحة نصف حجم في الأطراف). |
space-evenly | يتم توزيع العناصر والمسافات بينها بحيث تكون المساحة قبل العنصر الأول، وبين العناصر، وبعد العنصر الأخير متساوية تماماً. |
مثال: التوسيط الأفقي
css .container { display: flex; width: 500px; border: 1px solid red; }
/* يوسط العناصر أفقياً (إذا كان flex-direction: row) */ .centered-row { justify-content: center; }
/* يدفع العناصر إلى الحواف مع مسافات متساوية بينها */ .spaced-out { justify-content: space-between; }
استخدام شائع: توسيط روابط التنقل أو مباعدة العناصر بالتساوي في التذييل (footer).