ویژگی flex-shrink در CSS
تعریف و استفاده
ویژگی flex-shrink در همان قالب قفل شده است، مقدار انقباض یک عنصر نسبت به بقیه عنصرهای انعطاف‌پذیر.
نکته:اگر عنصر انعطاف‌پذیر نباشد، ویژگی flex غیرمفید است.
لطفاً ببینید:
آموزش CSS: قابلیت انعطاف‌پذیری CSS
دستورالعمل CSS:ویژگی flex
دستورالعمل CSS:ویژگی flex-basis
دستورالعمل CSS:ویژگی flex-direction
دستورالعمل CSS:ویژگی flex-flow
دستورالعمل CSS:ویژگی flex-grow
دستورالعمل CSS:ویژگی flex-wrap
دستورالعمل HTML DOM:ویژگی flexShrink
مثال
تغییر انقباض دومین عنصر انعطاف‌پذیر نسبت به بقیه به سه برابر:
div:nth-of-type(2) {
flex-shrink: 3;
}
قوانین CSS
flex-shrink: number|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| number | اعداد، که مقدار انقباض یک عنصر نسبت به بقیه عنصرهای انعطاف‌پذیر را مشخص می‌کند. مقدار پیش‌فرض 1 است. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. ببینید: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. ببینید: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 1 |
|---|---|
| وراثت: | خیر |
| انیمیشن: | لطفاً ببینید:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| قوانین جاوااسکریپت: | object.style.flexShrink="5" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را به طور کامل پشتیبانی می‌کند.
اعداد اولین نسخه‌ای که از پیشوند استفاده می‌کند -webkit- یا -moz-.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
