پشتیبانی از align-content در طرح بندی بلوک و جدول

راشل اندرو

از کروم ۱۲۳ می‌توانید از ویژگی align-content از CSS Box Alignment در طرح‌بندی‌های بلوک و جدول استفاده کنید. این کار امکان ترازبندی جهت بلوک را بدون نیاز به ایجاد طرح‌بندی flex یا grid فراهم می‌کند. با این حال، اگر align-content خارج از این روش‌های طرح‌بندی استفاده کرده‌اید، ممکن است لازم باشد CSS خود را به‌روزرسانی کنید، زیرا اکنون اعمال خواهد شد.

Browser Support

  • کروم: ۱۲۳.
  • لبه: ۱۲۳.
  • فایرفاکس: ۱۲۵.
  • سافاری: ۱۷.۴.

align-content در طرح‌بندی‌های فلکس و گرید

احتمالاً align-content برای ترازبندی آیتم‌های flex یا مسیرهای شبکه‌ای استفاده کرده‌اید. در یک طرح‌بندی flex، از ویژگی align-content در کانتینر flex برای ترازبندی آیتم‌های flex روی محور متقاطع استفاده می‌شود. در مثال زیر، مقدار آن space-between است، بنابراین فضای موجود در کانتینر flex را بین ردیف‌های flex توزیع می‌کند.

ویژگی align-content به دلیل فضای خالی موجود در محور متقاطع توسط کانتینر فلکس، بین ردیف‌های آیتم‌های فلکس فاصله ایجاد می‌کند.

یک آیتم را به صورت عمودی در مرکز قرار دهید

جایی که align-content به طور خاص مفید است، قرار دادن یک آیتم به صورت عمودی در مرکز یک کانتینر است. برای دستیابی به این هدف، display: flex به همراه align-content: center استفاده کنید. این باعث می‌شود آیتم به یک آیتم flex تبدیل شود و سایر رفتارهای پیش‌فرض flex item نیز اعمال می‌شوند. در مثال زیر، عنوان با align-content: center به صورت عمودی در مرکز قرار گرفته است، این باعث می‌شود آیتم برای جا شدن در محتوا کوچک شود و بنابراین باید flex-grow: 1 به آیتم اعمال کنید.

ویژگی align-content عنوان را به صورت عمودی در مرکز یک ظرف فلکس قرار می‌دهد.

با استفاده از align-content برای طرح‌بندی بلوکی، می‌توانید بدون نیاز به ایجاد طرح‌بندی flex برای عملکرد ویژگی، به ترازبندی عمودی دست یابید. هیچ ویژگی اضافی مورد نیاز نیست زیرا آیتم همچنان یک آیتم بلوکی باقی می‌ماند، تنها تغییر در ترازبندی است.

ویژگی align-content عنوان را به صورت عمودی در وسط یک بلوک قرار می‌دهد (به Chrome 123 یا Safari 17.4 یا بالاتر نیاز دارد).

تست پشتیبانی از align-content در طرح‌بندی‌های بلوکی

متأسفانه، آزمایش پشتیبانی از align-content در طرح‌بندی بلوکی امکان‌پذیر نیست. از آنجایی که align-content مدت زیادی است که در طرح‌بندی فلکس و گرید پشتیبانی می‌شود، استفاده از کوئری‌های ویژگی با @supports همیشه مقدار true را برمی‌گرداند. این همان وضعیتی است که برای ویژگی gap در flexbox اتفاق افتاد. گروه کاری CSS در حال بررسی راه‌حلی برای پیاده‌سازی‌های جزئی مانند این است .

سایت‌های خود را برای ترازبندی غیرمنتظره بررسی کنید

ویژگی align-content سال‌هاست که در مشخصات به عنوان ویژگی کار بر روی طرح‌بندی‌های بلوکی تعریف شده است. از آنجایی که هیچ مرورگری خارج از این زمینه‌ها align-content پشتیبانی نمی‌کرد، هیچ کاری انجام نمی‌داد. با این حال، اگر این ویژگی را به چیزی اضافه کرده باشید که یک ظرف flex یا grid نباشد، از Chrome 123 شروع به تأثیرگذاری خواهد کرد. در CSS خود، کاربرد align-content را جستجو کنید و اگر این مورد برای شما صدق می‌کند، از نسخه بتا برای آزمایش سایت‌ها و برنامه‌های خود استفاده کنید.