انتقل إلى محتوى الدرس

Align Content Wrapped Lines محاذاة الأسطر الملتفة متعامداً

افهم كيف توزع خاصية align-content الأسطر المتعددة الملتفة على المحور المتعامد في Flexbox، ولماذا تشترط تفعيل الالتفاف مع وجود ارتفاع متاح، وكيف تختلف جوهرياً عن خاصية align-items.
2 صفوف تعليمية
لغة CSS
3,851 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند تفعيل التفاف العناصر عبر flex-wrap: wrap على الحاوية المرنة، تنكسر العناصر الفائضة لتشكّل سطرين مرنين أو أكثر. وإذا امتلكت الحاوية ارتفاعاً صريحاً عبر height أو min-height يفوق مجموع ارتفاعات تلك الأسطر، تظهر مساحة فارغة متبقية على المحور المتعامد.

تُكتب خاصية align-content على الحاوية الأب لتجميع تلك الأسطر الملتفة أو توزيع الفراغ بينها. احفظ شرطي عملها الحاسمين: تفعيل الالتفاف flex-wrap: wrap (أو wrap-reverse) مع توفر مساحة متعامدة فائضة؛ أما في الحاوية ذات السطر الواحد nowrap فلا تملك هذه الخاصية أي أثر على الإطلاق.

الصف 2 ملاحظة هامة