تفاوت align self با align items

تفاوت align self و align items در CSS

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

align-items یک ویژگی سراسری است که روی ظرف Flex اعمال می‌شود و تراز عمودی تمام فرزندان مستقیم آن را کنترل می‌کند. در مقابل، align-self یک ویژگی تک‌عنصری است که روی آیتم‌های فردی اعمال می‌شود و تراز عمودی یک عنصر خاص را تنظیم می‌کند.

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

این دو ویژگی معمولاً در موارد زیر استفاده می‌شوند:

وقتی می‌خواهید تمام عناصر یک ظرف Flex را به یک شکل تراز کنید، از align-items استفاده می‌کنید.
وقتی نیاز دارید یک یا چند عنصر خاص تراز متفاوتی نسبت به بقیه داشته باشند، از align-self استفاده می‌کنید.
مقدار align-self همیشه بر align-items اولویت دارد.

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

در ادامه سه مثال کاربردی از این دو ویژگی را مشاهده می‌کنید:

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

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

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

.container {
  display: flex;
  align-items: flex-start; /* مقدار پیش‌فرض */
  height: 200px;
  border: 1px solid #ccc;
}

.item-special {
  align-self: flex-end; /* فقط این آیتم در انتها قرار می‌گیرد */
}

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

.container {
  display: flex;
  align-items: center;
  height: 300px;
  border: 1px solid #ccc;
}

.item1 { align-self: flex-start; }
.item3 { align-self: flex-end; }

نکات کلیدی

`align-items` روی ظرف Flex و `align-self` روی آیتم‌های Flex اعمال می‌شود.
مقادیر مشترک هر دو: flex-start, flex-end, center, baseline, stretch.
اگر `align-self` تنظیم نشده باشد، مقدار `align-items` اعمال می‌شود.
برای استفاده از این ویژگی‌ها، حتماً باید display: flex یا display: inline-flex تنظیم شده باشد.

با درک تفاوت این دو ویژگی و ترکیب هوشمندانه آن‌ها، می‌توانید کنترل دقیق‌تری روی چیدمان عمودی عناصر در طرح‌های Flexbox داشته باشید.

خلاصه درس

تمرین

مشاهده پاسخ

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

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