57. خاصية حاوية Flex: align-content (المحاذاة متعددة الأسطر)
تتحكم align-content في التباعد بين أسطر عناصر flex عندما تحتوي الحاوية على أسطر متعددة (flex-wrap: wrap). وهي تتحكم في التوزيع على طول المحور المتقاطع، بشكل مشابه لكيفية عمل justify-content للمحور الرئيسي.
ملاحظة: هذه الخاصية ليس لها تأثير عندما يكون flex-wrap: nowrap أو عندما تحتوي الحاوية على سطر واحد فقط من العناصر.
القيم المتاحة
القيم مطابقة تقريباً لـ justify-content ، لكنها تنطبق على أسطر المحتوى، وليس العناصر داخل الأسطر.
| القيمة | الوصف |
|---|---|
stretch (افتراضي) | تتمدد الأسطر لتشغل المساحة المتبقية. |
flex-start | يتم حشد الأسطر في بداية المحور المتقاطع. |
flex-end | يتم حشد الأسطر في نهاية المحور المتقاطع. |
center | يتم توسيط الأسطر في الحاوية. |
space-between | يتم توزيع الأسطر بالتساوي، مع عدم وجود مساحة في البداية/النهاية. |
space-around | يتم توزيع الأسطر بمسافات متساوية حول كل سطر. |
مثال: توسيط المحتوى الملتف
إذا كان لديك ثلاثة أسطر من المحتوى، وتريد أن تكون متجمعة في المركز الرأسي للحاوية:
css .container { display: flex; flex-wrap: wrap; height: 500px; /* يتطلب ارتفاعاً محدداً لتكون المحاذاة ملحوظة / align-content: center; / يوسط جميع أسطر العناصر رأسياً */ }
خلاصة:
justify-content: تباعد/محاذاة العناصر على طول المحور الرئيسي.align-items: محاذاة العناصر الفردية عبر المحور المتقاطع.align-content: تباعد/محاذاة الأسطر الملتفة عبر المحور المتقاطع.