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

Align Content Space Distribution توزيع المسافات بين الأسطر الملتفة

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

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

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

بنفس المنطق الحسابي لخاصية المحور الرئيسي، تدعم align-content قيم التوزيع الثلاث لفصل الأسطر الملتفة رأسياً:

  • space-between: تثبّت السطر الأول في أعلى الحاوية والسطر الأخير في أسفلها وتوزع الفراغ الرأسي المتبقي بين الأسطر فقط.
  • space-around: تحيط كل سطر بنصف مسافة متساوية من الأعلى والأسفل فتكون حافتا الحاوية نصف الفجوة بين السطرين.
  • space-evenly: تمنح مسافات رأسية متطابقة تماماً فوق السطر الأول وبين الأسطر وتحت السطر الأخير.

قارن بصرياً بين flex-start و center و space-between في المختبر التفاعلي التالي:

الصف 2 معاينة حية
الصف 3 ملاحظة هامة