کاربرد justify content در CSS Flexbox

در دنیای طراحی وب، CSS Flexbox یکی از قدرتمندترین ابزارها برای چیدمان عناصر صفحه است. یکی از مهم‌ترین ویژگی‌های Flexbox، خاصیت justify-content است که کنترل دقیقی بر نحوه توزیع فضای خالی بین یا اطراف آیتم‌ها در امتداد محور اصلی (main axis) فراهم می‌کند.

این ویژگی زمانی مؤثر است که فضای خالی درون ظرف (container) وجود داشته باشد. به عبارت دیگر، اگر مجموع عرض یا ارتفاع آیتم‌ها از اندازه ظرف کمتر باشد، justify-content تعیین می‌کند که این فضای اضافی چگونه بین آیتم‌ها توزیع شود.

خاصیت justify-content می‌تواند مقادیر مختلفی بگیرد که هر کدام رفتار متفاوتی در چیدمان عناصر ایجاد می‌کنند:

• flex-start (پیش‌فرض): آیتم‌ها در ابتدای محور اصلی جمع می‌شوند
• flex-end: آیتم‌ها در انتهای محور اصلی جمع می‌شوند
• center: آیتم‌ها در مرکز محور اصلی قرار می‌گیرند
• space-between: فضای خالی به طور مساوی بین آیتم‌ها توزیع می‌شود
• space-around: فضای خالی به طور مساوی اطراف هر آیتم توزیع می‌شود
• space-evenly: فضای خالی به طور کاملاً مساوی بین و اطراف آیتم‌ها توزیع می‌شود

از justify content در بسیاری از سناریوهای طراحی استفاده می‌شود. برای مثال، زمانی که می‌خواهید یک نوار ناوبری (navbar) ایجاد کنید و نیاز دارید آیتم‌های منو به صورت مساوی فاصله‌گذاری شوند، یا وقتی می‌خواهید یک گالری تصاویر را در وسط صفحه قرار دهید، justify content به کمک شما می‌آید.

این ویژگی به خصوص در طراحی‌های واکنش‌گرا (Responsive) بسیار مفید است، زیرا به شما امکان می‌دهد بدون نیاز به محاسبات پیچیده، چیدمان عناصر را بر اساس اندازه صفحه تنظیم کنید.

در ادامه سه مثال عملی از استفاده justify-content را مشاهده می‌کنید:

مثال ۱: چیدمان آیتم‌ها در ابتدای محور اصلی

.container {
  display: flex;
  justify-content: flex-start;
}

مثال ۲: توزیع مساوی فضای خالی بین آیتم‌ها

.container {
  display: flex;
  justify-content: space-between;
}

مثال ۳: قرار دادن آیتم‌ها در مرکز محور اصلی

.container {
  display: flex;
  justify-content: center;
}