justify-content، align-items، align-content، align-self

ترازبندی در دو محور: justify-content، align-items، align-content و align-self

در درس‌های قبل با Main Axis، Cross Axis و کنترل جهت و شکستن آیتم‌ها آشنا شدیم. حالا وقتشه با چهار Propertyی برسیم که احتمالاً بیشترین کاربرد رو در کار روزمره با Flexbox دارن؛ چون دقیقاً همون‌هایی هستن که به سؤال معروف «چطور یک عنصر رو دقیقاً وسط والدش قرار بدیم؟» جواب می‌دن.

justify-content: ترازبندی در طول Main Axis

.container {
  display: flex;
  justify-content: center;
}

Property به اسم justify-content مشخص می‌کنه Flex Itemها، در طول Main Axis، چطور نسبت به فضای خالی موجود در Container، توزیع بشن.

مقادیر اصلی justify-content

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

یک مثال بصری برای مقایسه سه مقدار space

.between { justify-content: space-between; }
.around { justify-content: space-around; }
.evenly { justify-content: space-evenly; }

تفاوت این سه مقدار، دقیقاً در نحوه محاسبه فضای اطراف آیتم‌های ابتدا و انتهاست: در space-between، هیچ فضایی قبل از اولین یا بعد از آخرین آیتم نیست. در space-around، هر آیتم فضای مساوی در دو طرفش داره، ولی چون آیتم‌های میانی از دو طرف فضا می‌گیرن (و آیتم‌های کناری فقط از یک طرف)، فاصله بین دو آیتم، دو برابر فاصله کنار لبه به‌نظر می‌رسه. در space-evenly، تمام فاصله‌ها (شامل فاصله کنار لبه‌ها) دقیقاً با هم برابرن.

align-items: ترازبندی در طول Cross Axis

.container {
  display: flex;
  align-items: center;
}

Property به اسم align-items، دقیقاً همون کار justify-content رو انجام می‌ده، ولی روی محور دیگه: Cross Axis. این Property مشخص می‌کنه آیتم‌ها، در طول Cross Axis، چطور تراز بشن.

مقادیر اصلی align-items

مقدار	رفتار
stretch (پیش‌فرض)	آیتم‌ها کشیده می‌شوند تا کل ارتفاع (یا عرض) Cross Axis را پر کنند
flex-start	آیتم‌ها در ابتدای Cross Axis تراز می‌شوند
flex-end	آیتم‌ها در انتهای Cross Axis تراز می‌شوند
center	آیتم‌ها در وسط Cross Axis تراز می‌شوند
baseline	آیتم‌ها بر اساس خط پایه متن‌شان (Baseline) تراز می‌شوند

ترکیب justify-content و align-items: وسط‌چین کردن کامل

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

<div class="container">
  <div>این عنصر دقیقاً وسط قرار می‌گیرد</div>
</div>

این دقیقاً همون ترکیب معروفیه که به‌عنوان ساده‌ترین و رایج‌ترین روش وسط‌چین کردن کامل یک عنصر (هم افقی، هم عمودی) در CSS مدرن شناخته می‌شه؛ چیزی که پیش از Flexbox، معمولاً نیاز به ترفندهای پیچیده‌تری (مثل ترکیب position: absolute با transform، که در فصل ۱۰ به‌طور خلاصه بهش اشاره کردیم) داشت.

align-content: ترازبندی چند خط در طول Cross Axis

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

Property به اسم align-content شبیه align-itemsه، ولی با یک تفاوت مهم: این Property فقط زمانی معنا داره که، به‌خاطر flex-wrap: wrap (که در درس قبل دیدیم)، آیتم‌ها به چند خط (یا چند «ستون»، بسته به flex-direction) شکسته شده باشن. در حالی که align-items، رفتار تک‌تک آیتم‌ها رو در Cross Axis کنترل می‌کنه، align-content، رفتار کل خطوط (که مجموعه‌ای از آیتم‌ها هستن) رو، نسبت به هم، در طول Cross Axis کنترل می‌کنه.

مقادیر align-content، دقیقاً همون مقادیری‌ست که در justify-content دیدیم (flex-start، flex-end، center، space-between، space-around، space-evenly، به‌علاوه stretch)؛ فقط این‌بار روی Cross Axis اعمال می‌شن، نه Main Axis.

نکته مهم: align-content بدون چند خط، بی‌اثر است

.container {
  display: flex;
  align-content: center; /* بدون flex-wrap: wrap، معمولاً بی‌اثر است */
}

اگه flex-wrap برابر nowrap باشه (مقدار پیش‌فرض)، یا اگه فضای Container کافی باشه و اصلاً هیچ شکستی اتفاق نیفته، معمولاً فقط یک «خط» از آیتم‌ها وجود داره؛ و در این حالت، align-content عملاً هیچ تأثیر قابل‌مشاهده‌ای نداره، چون چیزی برای ترازبندی «بین چند خط» وجود نداره.

align-self: بازنویسی align-items برای یک آیتم خاص

.container {
  display: flex;
  align-items: center;
}

.special-item {
  align-self: flex-end;
}

<div class="container">
  <div>آیتم عادی</div>
  <div class="special-item">آیتم خاص</div>
  <div>آیتم عادی</div>
</div>

Property به اسم align-self، برخلاف بقیه Propertyهایی که تا اینجا دیدیم، روی خود Flex Item تعریف می‌شه (نه Container)؛ و اجازه می‌ده فقط برای یک آیتم خاص، مقدار align-items که از والدش به ارث رسیده، Override بشه. در این مثال، همه آیتم‌ها وسط Cross Axis تراز می‌شن (به‌خاطر align-items: center روی Container)، به‌جز .special-item که با align-self: flex-end، خودش رو مستقلاً به انتهای Cross Axis می‌چسبونه.

مقایسه چهار Property در یک نگاه

Property	محور	تعریف روی	هدف
justify-content	Main Axis	Container	توزیع همه آیتم‌ها
align-items	Cross Axis	Container	ترازبندی همه آیتم‌ها
align-content	Cross Axis	Container	توزیع چند خط از آیتم‌ها (نیاز به flex-wrap)
align-self	Cross Axis	یک Item خاص	Override کردن align-items برای همان آیتم

یک مثال کامل ترکیبی: نوار پیمایش (Navbar)

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding-inline: 20px;
}

<nav class="navbar">
  <div>لوگو</div>
  <div>منوی ناوبری</div>
</nav>

این ترکیب، یکی از پرکاربردترین الگوهای طراحی رابط کاربریه: justify-content: space-between، لوگو و منو رو به دو انتهای مخالف Main Axis (افقی) می‌فرسته، و align-items: center، هر دو رو، صرف‌نظر از اندازه واقعی‌شون، به‌طور عمودی، وسط نوار قرار می‌ده.

نکات مهم

• justify-content روی Main Axis عمل می‌کند و align-items روی Cross Axis؛ ترکیب center برای هر دو، رایج‌ترین روش وسط‌چین کردن کامل است.
• align-content فقط زمانی معنا دارد که به‌خاطر flex-wrap، چند خط از آیتم‌ها وجود داشته باشد.
• align-self روی خود Flex Item تعریف می‌شود و اجازه می‌دهد فقط یک آیتم، مستقل از بقیه، ترازبندی متفاوتی در Cross Axis داشته باشد.

اشتباهات رایج

• قاطی کردن align-items و align-content؛ اولی برای تک‌تک آیتم‌ها، دومی برای کل خطوط (فقط با flex-wrap).
• انتظار داشتن تأثیر از align-content، بدون فعال بودن flex-wrap: wrap یا بدون وجود چند خط واقعی.
• تلاش برای تعریف align-self روی Flex Container به‌جای یک Flex Item مشخص.

جمع‌بندی

justify-content آیتم‌ها را در طول Main Axis، و align-items آن‌ها را در طول Cross Axis تراز می‌کند؛ ترکیب این دو با مقدار center، ساده‌ترین روش وسط‌چین کردن کامل یک عنصر در CSS مدرن است. align-content، مشابه align-items ولی برای چند خط از آیتم‌ها (فقط در کنار flex-wrap) عمل می‌کند، و align-self اجازه می‌دهد یک آیتم خاص، مستقل از بقیه، ترازبندی متفاوتی در Cross Axis داشته باشد.