ویژگی flex-grow CSS
- صفحه قبل flex-flow
- صفحه بعدی flex-shrink
تعریف و استفاده
ویژگی flex-grow مقدار افزایش این پروژه در مقایسه با بقیه پروژه‌های انعطاف‌پذیر در یک قالب مشترک را تعیین می‌کند.
نکته:اگر عنصر انعطاف‌پذیر نباشد، ویژگی flex غیرمتعیین است.
لطفاً به:
آموزش CSS: مقابله CSS انعطاف‌پذیر
دستورالعمل CSS:ویژگی flex
دستورالعمل CSS:ویژگی flex-basis
دستورالعمل CSS:ویژگی flex-direction
دستورالعمل CSS:ویژگی flex-flow
دستورالعمل CSS:ویژگی flex-shrink
دستورالعمل CSS:ویژگی flex-wrap
دستورالعمل HTML DOM:ویژگی flexGrow
مثال
باید عرض پروژه دوم به سه برابر عرض بقیه پروژه‌های انعطاف‌پذیر باشد:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
قوانین CSS
flex-grow: number|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| number | مقدار عددی، که تعیین می‌کند میزان افزایش این پروژه در مقایسه با بقیه پروژه‌های انعطاف‌پذیر است. پیش‌فرض 0 است. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. لطفاً به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 0 |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| قوانین جاوااسکریپت: | object.style.flexGrow="5" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه‌ای است که این ویژگی به طور کامل در مرورگرهای مختلف پشتیبانی می‌شود.
اعداد در جدول نشان‌دهنده نسخه اولیه‌ای است که از پیشوند استفاده می‌کند -webkit-، -ms- یا -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 |
- صفحه قبل flex-flow
- صفحه بعدی flex-shrink
