ویژگی align-content CSS
- صفحه قبل accent-color
- صفحه بعدی align-items
تعریف و استفاده
align-content تغییر ویژگی ویژگی flex-wrap رفتار ویژگی. align-items مشابه است، اما به جای تراز کردن پروژه‌های پلاستیک، خطوط پلاستیک را تراز می‌کند.
توجه:برای اینکه این ویژگی مؤثر باشد، باید پروژه‌های چند خطی باشند!
توضیح:استفاده از: justify-content ویژگی‌ای است که می‌تواند پروژه‌های اصلی (main-axis) را در راستای افقی تراز کند.
لطفاً به:
آموزش CSS:Flexbox CSS
آموزش 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 |
| جملات JavaScript: | 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 |
- صفحه قبل accent-color
- صفحه بعدی align-items
