🔹 Flex Direction چیه؟

ویژگی flex-direction مشخص می‌کنه که آیتم‌های داخل یک flex container در چه جهتی قرار بگیرن:

• افقی (row)

• عمودی (column)

• و حالت‌های معکوس (reverse)

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

• flex-row → آیتم‌ها به صورت افقی از چپ به راست (پیش‌فرض).

• flex-row-reverse → آیتم‌ها افقی ولی از راست به چپ.

• flex-col → آیتم‌ها عمودی از بالا به پایین.

• flex-col-reverse → آیتم‌ها عمودی ولی از پایین به بالا.

🔹 مثال (row و row-reverse)

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

<div class="flex flex-row-reverse space-x-2 bg-gray-200 p-2 mt-4">
  <div class="bg-blue-400 p-2">1</div>
  <div class="bg-green-400 p-2">2</div>
  <div class="bg-red-400 p-2">3</div>
</div>

📌 توی row-reverse ترتیب برعکس میشه و آیتم‌ها از راست شروع می‌کنن.

🔹 مثال (col و col-reverse)

<div class="flex flex-col bg-gray-200 p-2 h-40">
  <div class="bg-blue-400 p-2">1</div>
  <div class="bg-green-400 p-2">2</div>
  <div class="bg-red-400 p-2">3</div>
</div>

<div class="flex flex-col-reverse bg-gray-200 p-2 h-40 mt-4">
  <div class="bg-blue-400 p-2">1</div>
  <div class="bg-green-400 p-2">2</div>
  <div class="bg-red-400 p-2">3</div>
</div>

📌 توی col-reverse ترتیب آیتم‌ها از پایین به بالا نمایش داده میشه.

🔹 نکته مهم

• جهت اصلی محور (main axis) در flexbox با flex-direction مشخص میشه.

• ترکیب flex-direction با ویژگی‌های دیگه مثل justify-content و align-items خیلی مهمه برای ساختن layout منعطف.

• برای طراحی‌های ریسپانسیو می‌تونی از breakpoint‌ها هم استفاده کنی (مثلاً md:flex-col).