🔹 Flex Shrink چیه؟

ویژگی flex-shrink مشخص می‌کنه وقتی فضای ظرف (container) کم بشه، آیا آیتم اجازه داره کوچک بشه یا نه.

• مقدار 1 → آیتم می‌تونه کوچک بشه (پیش‌فرض).

• مقدار 0 → آیتم اجازه کوچک شدن نداره و همیشه اندازه خودش رو حفظ می‌کنه.

🔹 کلاس‌های Flex Shrink در Tailwind

• shrink → flex-shrink: 1 (آیتم می‌تونه جمع بشه).

• shrink-0 → flex-shrink: 0 (آیتم جمع نمیشه).

🔹 مثال (shrink)

<div class="flex bg-gray-200 p-2 w-64 space-x-2">
  <div class="shrink bg-blue-400 p-2 w-40">shrink (جمع میشه)</div>
  <div class="bg-green-400 p-2 w-40">عادی</div>
</div>

📌 آیتم آبی وقتی فضا کمه، کوچک میشه تا جا بشه.

🔹 مثال (shrink-0)

<div class="flex bg-gray-200 p-2 w-64 space-x-2">
  <div class="shrink-0 bg-red-400 p-2 w-40">shrink-0 (ثابت)</div>
  <div class="bg-yellow-400 p-2 w-40">عادی</div>
</div>

📌 آیتم قرمز ثابت می‌مونه و جمع نمیشه، حتی اگه باعث اسکرول افقی بشه.

🔹 نکته مهم

• shrink-0 برای مواقعی عالیه که می‌خوای یک دکمه، تصویر یا باکس همیشه اندازه مشخصی داشته باشه.

• اگر مقدار shrink رو تنظیم نکنی، Tailwind به طور پیش‌فرض flex-shrink: 1 رو اعمال می‌کنه.

• ترکیب flex-shrink با flex-grow و flex-basis قدرت خیلی زیادی میده برای کنترل Layout.