تنظیم flex-grow و flex-shrink در CSS
در دنیای طراحی واکنش‌گرا، Flexbox یکی از قدرتمندترین ابزارها برای چیدمان عناصر است. دو ویژگی کلیدی flex-grow و flex-shrink به توسعه‌دهندگان کمک می‌کنند تا رفتار انعطاف‌پذیری برای آیتم‌های داخل یک کانتینر فلکس ایجاد کنند.
flex-grow: کنترل رشد عناصر
ویژگی flex-grow مشخص می‌کند که یک آیتم فلکس چقدر می‌تواند نسبت به سایر آیتم‌ها رشد کند تا فضای خالی موجود در کانتینر را پر کند. مقدار پیش‌فرض آن 0 است که به معنای عدم رشد است.
- مقدار 0: عنصر رشد نمی‌کند
- مقدار 1: عنصر به نسبت مساوی رشد می‌کند
- مقدار 2: دو برابر عناصر با مقدار 1 رشد می‌کند
| مقدار |
تاثیر |
| 0 (پیش‌فرض) |
عدم رشد عنصر |
| 1 |
رشد متناسب |
| 2 |
رشد دوبرابر |
نکته: flex-grow فقط زمانی عمل می‌کند که فضای خالی در کانتینر وجود داشته باشد. این ویژگی بر اساس نسبت مقادیر تعیین شده بین آیتم‌ها کار می‌کند.
flex-shrink: کنترل جمع‌شدن عناصر
برخلاف flex-grow، ویژگی flex-shrink تعیین می‌کند که یک آیتم فلکس چقدر می‌تواند نسبت به سایر آیتم‌ها کوچک شود وقتی فضای کافی در کانتینر وجود ندارد. مقدار پیش‌فرض آن 1 است.
- مقدار 0: عنصر کوچک نمی‌شود
- مقدار 1: عنصر به نسبت مساوی کوچک می‌شود
- مقدار 2: دو برابر عناصر با مقدار 1 کوچک می‌شود
مثال کاربردی: اگر سه ستون با عرض 300px داشته باشید و فضای کانتینر فقط 600px باشد، با flex-shrink:1 همه ستون‌ها به 200px کاهش می‌یابند. اما اگر یکی از ستون‌ها flex-shrink:2 داشته باشد، سریع‌تر کوچک می‌شود.
ترکیب flex-grow و flex-shrink
این دو ویژگی اغلب با هم استفاده می‌شوند تا رفتار کاملاً انعطاف‌پذیری ایجاد کنند. می‌توانید آنها را به صورت مختصر با ویژگی flex تعیین کنید:
flex: [flex-grow] [flex-shrink] [flex-basis];
برای یادگیری عمیق‌تر درباره Flexbox، می‌توانید مقاله بیشتر بخوانید را مطالعه کنید.
در طراحی‌های مدرن، درک صحیح از این دو ویژگی به شما کمک می‌کند تا طرح‌هایی ایجاد کنید که به زیبایی با اندازه‌های مختلف صفحه سازگار شوند. تمرین عملی بهترین راه برای تسلط بر این مفاهیم است.
