📌 Flex یا Flexbox یک سیستم چیدمان مدرن در CSS است که اجازه می‌دهد عناصر به صورت انعطاف‌پذیر، افقی یا عمودی و با اندازه‌های خودکار قرار بگیرند.
Bootstrap 5 کلاس‌های آماده Flexbox را دارد که بدون نوشتن CSS می‌توان از آن استفاده کرد.

1️⃣ فعال کردن Flex

• کلاس: d-flex → فعال کردن Flex روی یک عنصر

<div class="d-flex bg-light p-2">
  <div class="p-2 bg-primary text-white">عنصر 1</div>
  <div class="p-2 bg-success text-white">عنصر 2</div>
</div>

این ساده‌ترین شکل Flex است: دو عنصر کنار هم به صورت افقی قرار می‌گیرند.

2️⃣ چیدمان افقی و عمودی

• افقی: flex-row → پیش‌فرض

• عمودی: flex-column

• معکوس افقی: flex-row-reverse

• معکوس عمودی: flex-column-reverse

<div class="d-flex flex-column bg-light p-2">
  <div class="p-2 bg-primary text-white">۱</div>
  <div class="p-2 bg-success text-white">۲</div>
  <div class="p-2 bg-danger text-white">۳</div>
</div>

3️⃣ Justify Content (تراز افقی)

• justify-content-start → چپ

• justify-content-center → وسط

• justify-content-end → راست

• justify-content-between → فاصله مساوی بین عناصر

• justify-content-around → فاصله مساوی با فضای اطراف

• justify-content-evenly → فاصله مساوی کامل

<div class="d-flex justify-content-between bg-light p-2">
  <div class="p-2 bg-primary text-white">1</div>
  <div class="p-2 bg-success text-white">2</div>
  <div class="p-2 bg-danger text-white">3</div>
</div>

4️⃣ Align Items (تراز عمودی عناصر)

• align-items-start → بالای خط

• align-items-center → وسط

• align-items-end → پایین خط

• align-items-baseline → روی خط متن

• align-items-stretch → کشیده شدن به ارتفاع والد

<div class="d-flex align-items-center" style="height:100px; background:#eee;">
  <div class="p-2 bg-primary text-white">وسط</div>
  <div class="p-2 bg-success text-white">وسط</div>
</div>

5️⃣ Flex Grow / Shrink / Fill

• flex-grow-1 → عنصر می‌تواند فضای باقی‌مانده را پر کند

• flex-fill → مشابه grow، تمام عرض والد را پر می‌کند

<div class="d-flex bg-light p-2">
  <div class="flex-fill p-2 bg-primary text-white">پر می‌شود</div>
  <div class="flex-fill p-2 bg-success text-white">همچنین</div>
</div>

6️⃣ Order (ترتیب نمایش)

• order-0 تا order-12 → تغییر ترتیب نمایش بدون تغییر HTML

<div class="d-flex bg-light p-2">
  <div class="order-3 p-2 bg-primary text-white">3</div>
  <div class="order-1 p-2 bg-success text-white">1</div>
  <div class="order-2 p-2 bg-danger text-white">2</div>
</div>

7️⃣ Wrap (شکست خط)

• flex-wrap → اجازه می‌دهد عناصر به خط بعدی بروند

• flex-nowrap → جلوگیری از شکست خط

<div class="d-flex flex-wrap bg-light p-2">
  <div class="p-2 bg-primary text-white">1</div>
  <div class="p-2 bg-success text-white">2</div>
  <div class="p-2 bg-danger text-white">3</div>
  <div class="p-2 bg-warning text-dark">4</div>
</div>

8️⃣ Align Self (تراز یک عنصر خاص)

• تغییر تراز عمودی یک عنصر بدون تاثیر روی بقیه

• کلاس‌ها: align-self-start, align-self-center, align-self-end, align-self-baseline, align-self-stretch

<div class="d-flex bg-light p-2" style="height:100px;">
  <div class="align-self-start p-2 bg-primary text-white">بالا</div>
  <div class="align-self-center p-2 bg-success text-white">وسط</div>
  <div class="align-self-end p-2 bg-danger text-white">پایین</div>
</div>

9️⃣ Responsive Flex Classes

• همه کلاس‌ها می‌توانند ریسپانسیو باشند:

  • d-md-flex → فعال شدن Flex از سایز متوسط به بالا

  • flex-lg-column → چیدمان عمودی فقط در دسکتاپ

  • justify-content-sm-center → وسط چین در موبایل کوچک

✅ نکات کلیدی:

• Flex بوت‌استرپ ساده و قابل ترکیب با Utilities است.

• می‌توان عناصر را افقی یا عمودی چید، اندازه‌ها را خودکار یا ثابت کرد و ترازبندی دقیق انجام داد.

• Flex با responsive classes امکان ساخت چیدمان‌های موبایل فرندلی و دسکتاپ را به راحتی می‌دهد.