خاصية المحاذاة على المحور الرئيسي
آخر تحديث: 2026-09-13
justify-content خاصية المحاذاة على المحور الرئيسي
تضبط الخاصية justify-content كيفية محاذاة عناصر flex على طول المحور الرئيسي وكيفية توزيع المساحة بين العناصر وبين العناصر وحواف الحاوية. هي خاصية المحاذاة الأكثر استخدامًا في flexbox وتدعم ترتيبات left و right و center و space-between و space-around و space-evenly. يُحدَّد المحور الرئيسي بواسطة flex-direction.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
justify-content: normal | start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | flex-start | flex-end | center | space-between | space-around | space-evenly | كلمة مفتاحية | المحاذاة على المحور الرئيسي. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-content | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تدفع space-between العنصر الأول والأخير إلى الحواف وتُباعد الوسط بالتساوي؛ وتمنح space-around كل عنصر مساحة متساوية على الجانبين، فتصبح الفجوات عند الحواف نصف الفجوات الداخلية؛ و تجعل space-evenly جميع الفجوات متساوية تمامًا.
مهم： يعمل justify-content على المحور الرئيسي. إذا كان flex-direction هو column، فيتحكم في المحاذاة الرأسية وتحتاج إلى ارتفاع محدد للحاوية لرؤية أي تأثير.
❓ الأسئلة الشائعة
Qما الفرق بين space-between و space-around و space-evenly؟
Aتضع space-between العنصر الأول والأخير ملتصقين بالحواف وتُباعد الوسط بالتساوي. وتمنح space-around كل عنصر مساحة متساوية يسارًا ويمينًا، فتصبح الفجوات عند الحواف نصف الفجوة بين عنصرين. وتجعل space-evenly كل فجوة، بما فيها عند الحواف، متساوية تمامًا. اختر space-between عندما يجب أن تلتصق الأطراف بالحواف، و space-evenly عندما تريد أكثر توزيع تجانسًا.
Qما الفرق بين justify-content و text-align: center؟
Aيُحاذي text-align: center المحتوى المضمّن مثل النص والعناصر المضمّنة داخل حاوية كتلة؛ ويعمل على مستوى النص. أما justify-content: center فيُموضع عناصر flex على طول المحور الرئيسي؛ ويعمل على مستوى التخطيط ويدعم أيضًا أوضاع التوزيع مثل space-between. ويمكن للاثنين أن يتعايشا: يمكن لحاوية flex توسيط عناصرها بـ justify-content بينما يظل النص داخل كل عنصر مُحاذى بـ text-align. استخدم justify-content للتخطيط و text-align للنص.
Qلماذا لا يعمل justify-content: center؟
Aالسبب الأكثر شيوعًا هو أن الحاوية لا تملك فضاءً متبقًٍا: عندما يساوي مجموع عرض العناصر عرض الحاوية أو يتجاوزه، لا يوجد فضاء حر على المحور الرئيسي لتوزيعه فلا يجد التوسيط ما يعمل عليه. وكذلك مع flex-direction: column تحتاج إلى ارتفاع صريح للحاوية، وإلا يملأ المحتوى الاتجاه الرأسي ولا يتبقى فضاء. افحص المحور الرئيسي وحجم الحاوية لمعرفة السبب.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
المحاذاة على المحور المتقاطع
يتحكم في كيفية محاذاة العناصر على المحور المتقاطع.
Justify Items
يتحكم في محاذاة المحور المضمّن لعناصر grid.
