تفاوت align items با align content

تفاوت align-items و align-content در CSS

در CSS Flexbox، دو ویژگی مهم برای ترازبندی آیتم‌ها وجود دارد: `align-items` و `align-content`. هر دو برای کنترل موقعیت عمودی عناصر استفاده می‌شوند، اما کاربرد و رفتار متفاوتی دارند. درک تفاوت این دو برای طراحی دقیق‌تر رابط کاربری ضروری است.

کاربردهای عملی

از align-items معمولاً برای ترازبندی آیتم‌ها در یک خط استفاده می‌شود. مثلاً برای وسط‌چین کردن عمودی یک سری دکمه در نوار ابزار. در حالی که align-content بیشتر در مواردی کاربرد دارد که آیتم‌ها در چند خط قرار می‌گیرند و نیاز به کنترل فضای بین خطوط دارید، مانند یک گالری تصاویر چندخطی.

نمونه کدهای مرتبط

در این بخش سه مثال کاربردی را بررسی می‌کنیم:

مثال ۱: استفاده از align-items

.container {
  display: flex;
  align-items: center; /* آیتم‌ها در وسط محور عمودی تراز می‌شوند */
  height: 200px;
  border: 1px solid #ccc;
}

مثال ۲: استفاده از align-content

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* فضای بین خطوط به صورت مساوی تقسیم می‌شود */
  height: 300px;
  border: 1px solid #ccc;
}

مثال ۳: ترکیب هر دو ویژگی

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* تراز آیتم‌ها در هر خط */
  align-content: center; /* تراز کل خطوط در وسط */
  height: 400px;
  border: 1px solid #ccc;
}

نکات کلیدی

align-items روی آیتم‌های درون یک خط اثر می‌گذارد، در حالی که align-content روی کل خطوط اثر دارد
align-content فقط زمانی کار می‌کند که چند خط وجود داشته باشد و فضای اضافی در محور عمودی موجود باشد
مقادیر مشترک هر دو ویژگی شامل: flex-start, center, flex-end, stretch است
مقدار پیش‌فرض align-items برابر stretch است
مقدار پیش‌فرض align-content برابر stretch است (وقتی تعریف نشده باشد)

نکته: با ترکیب مناسب این دو ویژگی می‌توانید کنترل کاملی بر چیدمان عمودی عناصر در Flexbox داشته باشید. تمرین عملی با این ویژگی‌ها به درک بهتر تفاوت‌های آنها کمک می‌کند.

توسعه دهندگان

امیر عبدی زاده