سی ایس ایس ایلائن کنٹین کی خصوصیات

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

ویژگی align-content تغییرات ویژگی ویژگی flex-wrap رفتار ویژگی. align-items مشابه است، اما به جای تراز کردن پروژه‌های انعطاف‌پذیر، به تراز کردن خطوط انعطاف‌پذیر می‌پردازد.

توجه:برای اینکه این ویژگی کار کند، باید پروژه‌های چند خطی داشته باشید!

توضیح:استفاده از: justify-content ویژگی می‌تواند پروژه‌های اصلی (main-axis) را در محور افقی水平 تراز کند.

لطفاً به: مراجعه کنید

آموزش CSS:CSS Flexbox

آموزش CSS:گرید CSS

دستورالعمل CSS:ویژگی align-items

دستورالعمل CSS:ویژگی align-self

دستورالعمل CSS:ویژگی justify-content

دستورالعمل HTML DOM:ویژگی alignContent

مثال

راستای‌ها را به مرکز محیط انعطاف‌پذیر بسته کنید:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

خودتان امتحان کنید

جمله‌بندی CSS

align-content: 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
وراثت: خیر
انیمیشن تهیه: پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جمله‌بندی جاوااسکریپت: object.style.alignContent="center"

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی است.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0