Justify Content

خاصیت justify-content مشخص می‌کنه که آیتم‌های داخل یک کانتینر Flex یا Grid در جهت اصلی (main axis) چطور چیده بشن.

  • برای Flex، جهت اصلی توسط flex-direction تعیین می‌شه.

  • برای Grid، جهت اصلی افقی پیش‌فرضه.

✅ کلاس‌های Tailwind

کلاسمقدار CSSتوضیح
justify-startjustify-content: flex-start;آیتم‌ها به ابتدا کانتینر چسبیده می‌شن
justify-endjustify-content: flex-end;آیتم‌ها به انتها کانتینر چسبیده می‌شن
justify-centerjustify-content: center;آیتم‌ها وسط کانتینر قرار می‌گیرن
justify-betweenjustify-content: space-between;فاصله بین آیتم‌ها یکسان، اول و آخر چسبیده به کانتینر
justify-aroundjustify-content: space-around;فاصله اطراف هر آیتم یکسان
justify-evenlyjustify-content: space-evenly;فاصله بین همه آیتم‌ها و لبه‌ها یکسان

📌 مثال

<div class="flex justify-between bg-gray-200 p-4">
  <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>

  • آیتم‌ها با justify-between طوری چیده می‌شن که فاصله بینشون مساوی باشه و آیتم اول و آخر چسبیده به لبه‌ها باشن.