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

Rachel Andrew

از Chrome 123 می‌توانید از ویژگی align-content از CSS Box Alignment در طرح‌بندی بلوک‌ها و جدول‌ها استفاده کنید. این امکان تراز کردن جهت بلوک را بدون نیاز به ایجاد یک طرح انعطاف پذیر یا شبکه ای فراهم می کند. با این حال، اگر از align-content خارج از این روش‌های طرح‌بندی استفاده کرده‌اید، ممکن است لازم باشد CSS خود را به‌روزرسانی کنید زیرا اکنون اعمال می‌شود.

align-content در طرح‌بندی‌های انعطاف‌پذیر و شبکه‌ای

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

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

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

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

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

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

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

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