flex grow در CSS

ویژگی flex grow در CSS را در اینجا بررسی کرده ایم.

فاکتور رشد CSS برای flex

ویژگی CSS flex-grow مشخص می کند که در صورت وجود فضای خالی در ظرف فلکس ، اندازه یک کالای فلکس چگونه افزایش می یابد:

/* Safari 6.1 and newer */

a:nth-of-type(1) {-webkit-flex-grow: 1;}
a:nth-of-type(2) {-webkit-flex-grow: 3;}
a:nth-of-type(3) {-webkit-flex-grow: 1;}
a:nth-of-type(4) {-webkit-flex-grow: 1;}
a:nth-of-type(5) {-webkit-flex-grow: 1;}
/* Standard syntax */
a:nth-of-type(4) {flex-grow: 2;}  
a:nth-of-type(5) {flex-grow: 5;}  
a:nth-of-type(6) {flex-grow: 8;}

این خاصیت به صورت مخالف انعطاف پذیری کار می کند. با استفاده از مختصر CSS flex می توانید از آن ها با هم راحت تر استفاده کنید.

نحوه استفاده از flex grow در CSS

برای استفاده از این ویژگی فقط باید یک مقدار تعریف کنید:

انعطاف پذیر: رشد

مقدار پیش فرض فلکس-رشد 0 است ، به این معنی که کالای فلکس اصلا رشد نخواهد کرد. شما می توانید یک مقدار سفارشی را در یک عدد بدون واحد تعریف کنید که نشان دهنده نسبت فضای موجود باشد.

اگر تمام موارد فلکس دارای مقادیر فلکس-رشد یکسان باشند ، فضای آزاد به طور مساوی بین آنها تقسیم می شود. اگر مقادیر متفاوت باشند ، فضا بر اساس آن تقسیم می شود.

تصور کنید که ما سه مورد را در یک ظرف فلکس داریم. ببینید مقادیر انعطاف پذیر آنها چه چیزی را مشخص می کند:

توجه: به خاطر داشته باشید حتی اگر فضای خالی را به طور مساوی توزیع کنید ، اگر موارد برای شروع از نظر اندازه یکسان نباشند ، به یک اندازه تمام نمی شوند.

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

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.