🔹 Flex چیه؟

ویژگی flex ترکیبی از سه خاصیت flex-grow، flex-shrink و flex-basis هست.
این ویژگی مشخص می‌کنه آیتم‌ها چطور فضا رو پر کنن، جمع بشن یا اندازه اولیه‌شون چی باشه.

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

Tailwind برای راحتی چند کلاس آماده داره:

• flex-1 → flex: 1 1 0%
  (یعنی آیتم هم رشد می‌کنه، هم جمع میشه و اندازه اولیه 0 داره).

• flex-auto → flex: 1 1 auto
  (آیتم رشد و جمع میشه ولی اندازه اولیه بر اساس محتوای خودش هست).

• flex-initial → flex: 0 1 auto
  (آیتم رشد نمی‌کنه، ولی اگه جا نشه جمع میشه).

• flex-none → flex: none → 0 0 auto
  (آیتم ثابت می‌مونه: نه رشد می‌کنه، نه جمع میشه).

🔹 مثال (flex-1)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="flex-1 bg-blue-400 p-2">A</div>
  <div class="flex-1 bg-green-400 p-2">B</div>
  <div class="flex-1 bg-red-400 p-2">C</div>
</div>

📌 همه آیتم‌ها فضا رو به صورت مساوی پر می‌کنن.

🔹 مثال (flex-auto vs flex-none)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="flex-auto bg-blue-400 p-2">auto (رشد میکنه)</div>
  <div class="flex-none bg-green-400 p-2 w-32">none (ثابت)</div>
</div>

📌 آیتم آبی متناسب با فضای باقی‌مونده رشد می‌کنه، ولی آیتم سبز همیشه ثابت می‌مونه.

🔹 مثال (flex-initial)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="flex-initial bg-yellow-400 p-2 w-40">initial</div>
  <div class="flex-initial bg-pink-400 p-2 w-40">initial</div>
  <div class="flex-1 bg-purple-400 p-2">flex-1</div>
</div>

📌 آیتم‌های اول و دوم فقط جمع میشن اگر جا نشه، ولی رشد نمی‌کنن. آیتم سوم کل فضای باقی‌مونده رو پر می‌کنه.

🔹 نکته مهم

• flex-1 پرکاربردترین کلاس Flex هست (برای تقسیم مساوی فضا).

• flex-none برای آیتم‌هایی که باید همیشه اندازه ثابت داشته باشن عالیه.

• با ترکیب این کلاس‌ها می‌تونی خیلی راحت layoutهای پیچیده بسازی بدون نیاز به CSS دستی.