بدءًا من إصدار Chrome 123، يمكنك استخدام السمة align-content من ميزة "محاذاة مربّع CSS"
في تنسيقات الكتل والجداول. سيسمح ذلك بمحاذاة اتجاه الكتلة بدون الحاجة إلى
إنشاء تنسيق مرن أو شبكي. مع ذلك، قد تحتاج إلى تحديث خدمة مقارنة الأسعار (CSS)
في حال استخدام align-content خارج نطاق طُرق التنسيق هذه، لأنّ هذا الإجراء سيُطبّق الآن.
التوافق مع المتصفح
- 123
- 123
- 125
- 17.4
align-content في التنسيقات المرنة والتنسيقات على شكل مربّعات
ربما استخدمت align-content لمحاذاة العناصر المرنة أو مسارات الشبكة. في التنسيق المرن، يتم استخدام السمة align-content على الحاوية المرنة لمحاذاة العناصر المرنة على المحور المتقاطع. في المثال التالي، تكون القيمة space-between، ولذلك يتم توزيع المساحة المتاحة في الحاوية المرنة
بين صفوف الخطة المرنة.
align-content صفوف العناصر المرنة، لأنّ الحاوية المرنة
تحتوي على مساحة احتياطية في المحور المتقاطع.توسيط عنصر عموديًا
عندما تكون فائدة align-content مفيدة بشكل خاص في توسيط عنصر عموديًا داخل الحاوية. لتحقيق ذلك، استخدِم السمة display: flex مع
align-content: center. يؤدي ذلك إلى أن يصبح العنصر مرنًا، ويتم أيضًا تطبيق سلوك تلقائي آخر للعنصر المرن. في المثال التالي، يتم توسيط العنوان عموديًا باستخدام align-content: center، ويؤدي ذلك إلى تقليص
العنصر ليتناسب مع المحتوى، وبالتالي عليك تطبيق flex-grow: 1
على العنصر.
align-content العنوان عموديًا داخل حاوية مرنة.مع توفّر align-content لتنسيق الكتل، ستتمكّن من تحقيق محاذاة عمودية بدون الحاجة إلى إنشاء تنسيق مرن للموقع. ليست هناك حاجة إلى خصائص إضافية حيث يظل العنصر عبارة عن كتلة، والتغيير الوحيد هو المحاذاة.
align-content العنوان عموديًا داخل حاوية مجموعة (تحتاج إلى استخدام متصفّح Chrome 123 أو Safari 17.4 أو إصدار أحدث).اختبار إمكانية استخدام align-content في تنسيقات الكتل
للأسف، لا يمكن اختبار دعم align-content في تنسيق الكتل. بما أنّ السمة align-content كانت متاحة لفترة طويلة في التنسيق المرن والشبكة،
سيؤدي استخدام طلبات البحث عن الميزات مع @supports إلى عرض القيمة "صحيح" دائمًا. وهذا هو الموقف نفسه الذي حدث مع السمة gap في flexbox. تعمل مجموعة عمل CSS على استكشاف حل لعمليات التنفيذ الجزئية مثل هذا.
التحقق من مواقعك الإلكترونية بحثًا عن محاذاة غير متوقّعة
تم تحديد السمة align-content لسنوات عديدة في
المواصفات المحددة للعمل على تنسيقات الكتل. وبما أنّه لم يكن هناك متصفّح متوافق مع align-content خارج هذه السياقات، لم يؤدِّ ذلك إلى اتخاذ أي إجراء. ومع ذلك، إذا أضفت الخاصية إلى شيء ليس عبارة عن حاوية مرن أو شبكة، فسوف يبدأ تطبيقها
بدءًا من Chrome 123. ابحث في خدمة CSS الخاصة بك عن استخدام align-content واستخدِم الإصدار التجريبي
لاختبار مواقعك الإلكترونية وتطبيقاتك إذا كان ذلك ينطبق عليك.