Align Items

خاصیت align-items مشخص می‌کنه که آیتم‌های داخل یک کانتینر Flex یا Grid در جهت عمودی (cross axis) چطور چیده بشن.

  • برای Flex، جهت عمودی به صورت معمول برعکس جهت اصلی است.

  • برای Grid، جهت عمودی پیش‌فرض ستون است.

✅ کلاس‌های Tailwind

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

📌 مثال

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

  • آیتم‌ها با items-center وسط محور عمودی قرار می‌گیرن و ارتفاع کانتینر رو پر نمی‌کنن.