در این بخش از آموزش Flexbox، سراغ مثال‌های پیشرفته‌تر می‌رویم تا ببینیم چطور می‌توانیم فاصله‌ها، چینش چندردیفی و تقسیم ارتفاع را کنترل کنیم.

---

🟥 مثال اول: آیتم‌های ثابت با فاصله‌ی انعطاف‌پذیر

فرض کنید چندین آیتم دارید (۵، ۱۰ یا حتی ۱۰۰). هر آیتم عرض و ارتفاع ثابت دارد:

.item {
  width: 150px;
  height: 100px;
  background: red;
}
.container {
  display: flex;
  justify-content: space-between;
}

🔹 در این حالت، Flexbox فضای باقی‌مانده بین آیتم‌ها را به‌طور مساوی تقسیم می‌کند.
🔹 مشکل: به‌طور پیش‌فرض Flexbox همه آیتم‌ها را در یک ردیف نگه می‌دارد (flex-wrap: nowrap).

راه‌حل: اجازه‌ی چند ردیف

.container {
  display: flex;
  flex-wrap: wrap; /* اجازه‌ی رفتن به چند ردیف */
}

🔹 حالا آیتم‌ها در صفحه‌های کوچک به چند ردیف تقسیم می‌شوند، ولی در صفحه‌های بزرگ‌تر همچنان در یک ردیف باقی می‌مانند.

---

🟦 مثال دوم: وسط‌چین کردن افقی و عمودی

یک باکس خاکستری داریم با کلاس banner و داخل آن یک div با کلاس center-me.

.banner {
  display: flex;
  width: 700px;
  height: 400px;
  background: #333;
}
.center-me {
  margin: auto; /* جادوی Flexbox */
}

🔹 با margin: auto و display: flex روی والد، محتوا در همه‌ی جهات (بالا، پایین، چپ، راست) وسط‌چین می‌شود.
🔹 این روش ساده‌ترین راه برای وسط‌چین کردن عمودی و افقی است.

---

🟩 مثال سوم: تقسیم ارتفاع بین ستون‌ها

فرض کنید یک چیدمان دو ستونه داریم: ستون اول محتوای اصلی، ستون دوم شامل دو باکس (آبی و سبز).

.equal-height-container {
  display: flex;
}
.first {
  flex: 1; /* ستون اصلی */
}
.second {
  flex: 1; /* ستون دوم */
  display: flex;
  flex-direction: column; /* تقسیم عمودی */
}
.second div {
  flex: 1; /* تقسیم مساوی ارتفاع */
}

🔹 با flex-direction: column، Flexbox فضای عمودی را تقسیم می‌کند.
🔹 با flex: 1 روی هر باکس، ارتفاع ستون دوم به‌طور مساوی بین باکس آبی و سبز تقسیم می‌شود.

---

🎬 مرور پایانی

در این بخش یاد گرفتیم:

• استفاده از flex-wrap برای چندردیفی کردن آیتم‌ها
• وسط‌چین کردن کامل محتوا با margin: auto
• تقسیم ارتفاع بین عناصر با flex-direction: column و Flexbox تو در تو

---

✨ Flexbox فقط یک ابزار نیست؛ یک ذهنیت جدید برای طراحی واکنش‌گراست. با تمرین بیشتر می‌توانید چیدمان‌های حرفه‌ای بسازید، بدون نیاز به ترفندهای پیچیده‌ی float یا position.

💡 پیشنهاد تمرین: یک گالری عکس بسازید که در دسکتاپ همه عکس‌ها در یک ردیف باشند، در تبلت دو‌تایی و در موبایل تک‌ستونه نمایش داده شوند.