Align Self

خاصیت align-self به هر آیتم به‌صورت جداگانه اجازه می‌ده که نحوه قرارگیریش در محور عمودی (cross axis) نسبت به بقیه آیتم‌ها تغییر کنه.

  • این خاصیت فقط روی یک آیتم اعمال می‌شه، نه روی کل کانتینر.

  • وقتی روی Flex یا Grid استفاده می‌کنید، مقدارش می‌تونه با align-items کانتینر متفاوت باشه.

✅ کلاس‌های Tailwind

کلاسمقدار CSSتوضیح
self-autoalign-self: auto;مقدار پیش‌فرض، از align-items کانتینر پیروی می‌کنه
self-startalign-self: flex-start;آیتم به ابتدای محور عمودی می‌چسبه
self-endalign-self: flex-end;آیتم به انتهای محور عمودی می‌چسبه
self-centeralign-self: center;آیتم وسط محور عمودی قرار می‌گیره
self-stretchalign-self: stretch;آیتم تمام ارتفاع کانتینر رو پر می‌کنه
self-baselinealign-self: baseline;آیتم بر اساس خط مبنای متن خودش چیده می‌شه

📌 مثال

<div class="flex h-32 bg-gray-200">
  <div class="bg-coral p-4 self-start">Item 1</div>
  <div class="bg-coral p-4 self-center">Item 2</div>
  <div class="bg-coral p-4 self-end">Item 3</div>
</div>

  • آیتم 1 به ابتدای محور عمودی

  • آیتم 2 وسط

  • آیتم 3 به انتها