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- نشاندهنده نسخه اولیه با استفاده از پیشوند هستند.
| کروم | آئی ای / ایج | فائرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
