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