وسط‌چین کردن محتوا؟ Flexbox یک ثانیه‌ای انجامش می‌دهد!

تراز کردن جادویی: Justify-Content و Align-Items در Flexbox! 🪄

سلام به همگی! تا الان با ابزارهای اولیه‌ی Flexbox آشنا شدیم: چطور یه کانتینر بسازیم، جهت چیدمان رو تعیین کنیم و بدونیم چطور آیتم‌ها اگه جا نشدن، رفتار کنن. اما بزرگترین قدرت Flexbox در انعطاف‌پذیری و سادگی تراز کردن عناصر هست! امروز می‌خوایم دو تا از کلیدی‌ترین خصوصیت‌ها برای این کار رو بررسی کنیم: justify-content و align-items. با این‌ها، دیگه هیچ عنصری از جایگاه دلخواه ما دور نمی‌مونه! 😍

1. `justify-content`: هم‌ترازی در طول محور اصلی! ↔️

همونطور که یاد گرفتیم، Main Axis (محور اصلی) جهتیه که آیتم‌های فلکس در طول اون چیده می‌شن (معمولاً افقی، مگر اینکه flex-direction رو عوض کرده باشیم). خصوصیت justify-content دقیقاً روی همین محور اصلی تاثیر می‌ذاره و نحوه‌ی توزیع فضای خالی رو بین آیتم‌ها و در کناره‌های اون‌ها کنترل می‌کنه.

مقادیر رایج `justify-content`:

• `flex-start` (پیش‌فرض): آیتم‌ها در ابتدای Main Axis جمع می‌شن.
• `flex-end`: آیتم‌ها در انتهای Main Axis جمع می‌شن.
• `center`: آیتم‌ها در وسط Main Axis قرار می‌گیرن. (عالی برای وسط چین کردن!)
• `space-between`: اولین آیتم در ابتدا، آخرین آیتم در انتها، و فضای خالی باقی‌مانده به طور مساوی بین آیتم‌های دیگر تقسیم می‌شه.
• `space-around`: فضای خالی به طور مساوی دور هر آیتم تقسیم می‌شه (یعنی فاصله از ابتدا و انتها نصف فاصله بین آیتم‌هاست).
• `space-evenly`: فضای خالی به طور کاملاً مساوی بین همه آیتم‌ها و همچنین در ابتدا و انتهای Main Axis تقسیم می‌شه.

.flex-container {
  display: flex;
  flex-direction: row; /* فرض می‌کنیم محور اصلی افقی است */
  height: 150px; /* برای نمایش بهتر فضا */
  background-color: #ffecb3; /* رنگ پس‌زمینه */
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item {
  width: 80px;
  height: 60px;
  background-color: #ffa000; /* رنگ آیتم‌ها */
  color: white;
  display: flex;
  justify-content: center; /* برای وسط چین کردن متن داخل خود آیتم */
  align-items: center; /* برای وسط چین کردن متن داخل خود آیتم */
  margin: 5px; /* کمی فاصله بین آیتم‌ها */
}

/* مثال‌هایی از justify-content */
.jc-flex-start { justify-content: flex-start; background-color: #ffe082; }
.jc-center { justify-content: center; background-color: #ffd54f; }
.jc-space-between { justify-content: space-between; background-color: #ffc107; }
.jc-space-around { justify-content: space-around; background-color: #ffb300; }

`justify-content` واقعا عالیه برای پخش کردن عناصر در طول یه ردیف یا ستون. `center` برای وسط چین کردن و `space-between` برای ایجاد ساختارهای منظم فوق‌العاده‌ان!

2. `align-items`: هم‌ترازی در طول محور متقاطع! ⬆️

حالا نوبت Cross Axis (محور متقاطع) هست. این محور عمود بر Main Axis هست. خصوصیت align-items به ما اجازه می‌ده آیتم‌های فلکس رو در طول این محور متقاطع تراز کنیم.

مقادیر رایج `align-items`:

• `stretch` (پیش‌فرض): آیتم‌ها تا جایی که ممکنه کشیده می‌شن تا فضای کل کانتینر رو در طول Cross Axis پر کنن (به شرطی که ارتفاع یا عرض مشخصی نداشته باشن).
• `flex-start`: آیتم‌ها در ابتدای Cross Axis جمع می‌شن.
• `flex-end`: آیتم‌ها در انتهای Cross Axis جمع می‌شن.
• `center`: آیتم‌ها دقیقاً در وسط Cross Axis قرار می‌گیرن. (باز هم عالی برای وسط چین کردن!)
• `baseline`: آیتم‌ها بر اساس خط پایه متن داخلشون تراز می‌شن.

.flex-container-vertical {
  display: flex;
  flex-direction: row; /* فرض می‌کنیم محور اصلی افقی است */
  height: 250px; /* ارتفاع لازم برای نمایش تراز عمودی */
  background-color: #ffccbc; /* رنگ پس‌زمینه */
  padding: 10px;
  margin-bottom: 15px;
}

.flex-item-ai {
  width: 80px;
  background-color: #ff7043; /* رنگ آیتم‌ها */
  color: white;
  padding: 15px 0; /* پدینگ عمودی */
  margin: 5px;
  text-align: center;
  font-weight: bold;
}

/* مثال‌هایی از align-items */
.ai-stretch { align-items: stretch; background-color: #ffab91; } /* آیتم‌ها کشیده می‌شن */
.ai-center { align-items: center; background-color: #ff8a65; } /* آیتم‌ها وسط چین می‌شن */
.ai-flex-end { align-items: flex-end; background-color: #ff7043; } /* آیتم‌ها به پایین می‌چسبن */
.ai-flex-start { align-items: flex-start; background-color: #ff5722; } /* آیتم‌ها به بالا می‌چسبن */

.perfectly-centered-container {
  display: flex;
  justify-content: center; /* وسط چین در محور اصلی (افقی) */
  align-items: center;     /* وسط چین در محور متقاطع (عمودی) */
  height: 100vh;           /* کل ارتفاع صفحه */
  background-color: #fbe9e7; /* پس‌زمینه */
}

.centered-content {
  width: 200px;
  height: 100px;
  background-color: #ff8a65;
  color: white;
  font-size: 1.5em;
  display: flex;
  justify-content: center; /* این هم متن داخل خودش رو وسط چین می‌کنه */
  align-items: center;     /* این هم متن داخل خودش رو وسط چین می‌کنه */
  border-radius: 10px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}