شرح صفوف ومحتوى الفقرة
إذا كتبت align-content: center ولم تلاحظ أي استجابة، فافتح لوحة Styles في أدوات المطور DevTools؛ ستجد المتصفح يظلل السطر بلون باهت مع أيقونة إرشادية توضح أن غياب flex-wrap: wrap يمنع تكوّن أسطر متعددة. راجع جدول المقارنة الشامل التالي:
القيمة في align-content | نطاق التأثير | سلوك الأسطر الملتفة | النمط التطبيقي الأشهر |
|---|---|---|---|
stretch | الأسطر الملتفة | تمدد مسارات الأسطر لملء الارتفاع | شبكات المربعات الممتدة داخل ارتفاع ثابت |
flex-start | الأسطر الملتفة | تجميع كافة الصفوف في بداية الحاوية | سُحب الكلمات المفتاحية وفلاتر البحث |
flex-end | الأسطر الملتفة | تجميع كافة الصفوف في نهاية الحاوية | أوسمة التصنيف المثبتة أسفل البطاقات |
center | الأسطر الملتفة | ضم جميع الصفوف متلاصقة بالوسط | مجموعات الشارات المتوسطة بعدة صفوف |
space-between | الأسطر الملتفة | تثبيت أول وآخر صف على الحافتين | لوحات المؤشرات المكونة من صفين متباعدين |
space-around / space-evenly | الأسطر الملتفة | فواصل محيطية نصفية أو متساوية تماماً | جدران الشعارات المتعددة الصفوف بتوازن بصري |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفت في هذا الدرس على شروط عمل align-content بوجود الالتفاف flex-wrap: wrap وارتفاع متاح، وكيفية ضم صفوف الأوسمة بـ flex-start و center، والفرق الجوهري بينها وبين align-items. في الخطوة التالية ننتقل إلى درس خاصية order مع Flexbox في لغة CSS للتحكم في الترتيب البصري لظهور العناصر المرنة.