🔹 Flex Wrap چیه؟

به صورت پیش‌فرض آیتم‌های Flexbox همه توی یک خط (row یا column) قرار می‌گیرن، حتی اگه جا نشه!
ویژگی flex-wrap مشخص می‌کنه آیا آیتم‌ها اجازه دارن به خط بعدی برن یا نه.

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

• flex-nowrap → آیتم‌ها همه در یک خط می‌مونن (پیش‌فرض).

• flex-wrap → آیتم‌ها اگه جا نشه، می‌رن خط بعدی.

• flex-wrap-reverse → آیتم‌ها می‌رن خط بعدی ولی به صورت معکوس.

🔹 مثال (nowrap)

<div class="flex flex-nowrap space-x-2 bg-gray-200 p-2 w-64">
  <div class="bg-blue-400 p-2 w-32">1</div>
  <div class="bg-green-400 p-2 w-32">2</div>
  <div class="bg-red-400 p-2 w-32">3</div>
</div>

📌 همه‌ی آیتم‌ها توی یک خط می‌مونن و ممکنه از ظرف بیرون بزنن.

🔹 مثال (wrap)

<div class="flex flex-wrap space-x-2 bg-gray-200 p-2 w-64">
  <div class="bg-blue-400 p-2 w-32">1</div>
  <div class="bg-green-400 p-2 w-32">2</div>
  <div class="bg-red-400 p-2 w-32">3</div>
</div>

📌 وقتی جا نشه، آیتم سوم می‌ره خط بعدی.

🔹 مثال (wrap-reverse)

<div class="flex flex-wrap-reverse space-x-2 bg-gray-200 p-2 w-64 h-32">
  <div class="bg-blue-400 p-2 w-32">1</div>
  <div class="bg-green-400 p-2 w-32">2</div>
  <div class="bg-red-400 p-2 w-32">3</div>
</div>

📌 آیتم‌ها به خط بعدی می‌رن، ولی ترتیب از پایین شروع میشه.

🔹 نکته مهم

• flex-wrap برای ساختن گریدهای ساده خیلی کاربردیه.

• اگه می‌خوای آیتم‌ها به صورت اتوماتیک توی چند خط بچینن، حتماً باید از این کلاس استفاده کنی.

• ترکیب flex-wrap با gap یا space-x/space-y خیلی رایجه برای چیدمان منظم.