ویژگی alignContent Style

تعریف و استفاده

وقتی که عناصر از فضای قابل استفاده تمامی محور عمودی ( عمودی) استفاده نمی‌کنند،alignContent عناصر را در حاوی انعطاف‌پذیر با استفاده از خصوصیت قرار دهند.

توضیحات:لطفاً از ویژگی justifyContent عناصر را در محور اصلی ( افقی) مرتب کنند.

نکته:برای اینکه این خصوصیت مؤثر باشد، باید عناصر چندخطی باشند.

مثال

عناصر div انعطاف‌پذیر را در بین دو خط با فضای بین آنها قرار دهید:

document.getElementById("main").style.alignContent = "space-between";

آزمایش کنید

قوانین

بازگشت خصوصیت alignContent:

object.style.alignContent

تنظیم خصوصیت alignContent:

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

مقدار خصوصیت

مقدار توضیح
stretch مقدار پیش‌فرض. خطوط به گونه‌ای کشیده می‌شوند که فضا را اشغال کنند.
center عناصر در مرکز حاوی قرار دارند.
flex-start عناصر در ابتدای حاوی قرار دارند.
flex-end عناصر در انتهای حاوی قرار دارند.
space-between عناصر در بین خطوط با فضای بین آنها قرار دارند.
space-around پیش‌بینی‌های خطی، فضای بین خطوط و فضای پس از خط، خالی هستند.
initial این خصوصیت را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این خصوصیت را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: stretch
مقدار بازگشتی: رشته، که نشان‌دهنده خصوصیت align-content.
نسخه CSS: CSS3

پشتیبانی مرورگر

alignContent این یک ویژگی CSS3 (1999) است.

همه مرورگرها این خصوصیت را به طور کامل پشتیبانی می‌کنند:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی 11

صفحات مرتبط

منشور مرجع CSS:خصوصیت align-content

منشور مرجع DOM STYLE HTML:خصوصیت alignItems

منشور مرجع DOM STYLE HTML:خصوصیت alignSelf

منشور مرجع DOM STYLE HTML:ویژگی justifyContent