🔹 Flex Basis چیه؟

ویژگی flex-basis اندازهٔ اولیهٔ یک المان رو داخل یک flex container مشخص می‌کنه.
یعنی قبل از اینکه flex-grow یا flex-shrink اعمال بشن، المان با اون مقدار شروع میشه.

📌 ساده بگیم: flex-basis مثل عرض پیش‌فرض برای آیتم‌های flex عمل می‌کنه.

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

• basis-0 → اندازه اولیه = 0

• basis-1/2 → نصف فضای container

• basis-1/3 → یک‌سوم فضا

• basis-2/3 → دوسوم فضا

• basis-1/4 → یک‌چهارم فضا

• basis-3/4 → سه‌چهارم فضا

• basis-full → کل عرض container

همچنین می‌تونی از spacing scale هم استفاده کنی:

• basis-10, basis-20, basis-40 (واحد rem بر اساس Tailwind spacing).

🔹 مثال (تقسیم‌بندی مساوی)

<div class="flex space-x-2">
  <div class="basis-1/2 bg-blue-400 p-2">1/2</div>
  <div class="basis-1/2 bg-green-400 p-2">1/2</div>
</div>

📌 هر کدوم نصف فضا رو می‌گیرن.

🔹 مثال (تقسیم نامساوی)

<div class="flex space-x-2">
  <div class="basis-1/3 bg-yellow-400 p-2">1/3</div>
  <div class="basis-2/3 bg-pink-400 p-2">2/3</div>
</div>

📌 یکی یک‌سوم و دیگری دوسوم فضا رو می‌گیره.

🔹 مثال (basis ثابت با spacing scale)

<div class="flex space-x-2">
  <div class="basis-20 bg-purple-400 p-2">basis-20</div>
  <div class="basis-40 bg-red-400 p-2">basis-40</div>
  <div class="basis-60 bg-green-400 p-2">basis-60</div>
</div>

📌 آیتم‌ها اندازه مشخص دارن و نسبت به هم تغییر نمی‌کنن (مگر grow/shrink اضافه بشه).

🔹 نکته مهم

• اگر همزمان width و flex-basis ست بشه، flex-basis اولویت داره.

• basis-0 همراه با flex-grow می‌تونه برای تقسیم مساوی فضا خیلی مفید باشه.

• خیلی وقتا با flex-grow و flex-shrink ترکیب میشه تا layout‌های ریسپانسیو ساخته بشن.