نمونه کد

یک نمونه ساده از خاصیت justify-content:

آزمایشگاه

تعریف و کاربرد

زمانی که آیتم ها از تمام فضای موجود در جهت افقی استفاده نکنند، ویژگی justify-content آیتم های انعطاف پذیر را هم سطح می کند.

نکته: با استفاده از خاصیت align-item برای هم سطح سازی آیتم ها استفاده کنید.

اطلاعات

# توضیحات
مقدار پیشفرض شروع انعطلاف پذیری
ارث بری خیر
انیمیشن خیر
نسخه CSS3
نگارش JS object.style.justifyContent="space-between"

سازگاری با مرورگر

اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت justify-content هستند.

# کروم ادج فایرفاکس سافاری اپرا
justify-content

شیوه نگارش

مقادیر

مقادیر توضیحات
flex-start آیتم ها در بخش شروع محفظه به صورت پیش فرض قرار می گیرند.
flex-end آیتم ها در بخش پایانی محفظه قرار می گیرند.
center آیتم ها در بخش مرکزی محفظه قرار می گیرند.
space-between آیتم ها با فاصله در محفظه قرار می گیرند.
space-around قبل، بعد و بین آیتم ها فاصله ای قرار خواهد گرفت.
space-evenly آیتم ها به فاصله ای مساوی در اطراف خود در محفظه قرار می گیرند.
initial این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit این مقدار را از تگ والد خود به ارث می برد.

صفحات مرتبط

آموزش CSS: CSS flexbox

آموزش CSS: شبکه CSS

مرجع CSS: ویژگی align-content

مرجع CSS: ویژگی align-items

مرجع CSS: ویژگی align-self

مرجع HTML DOM: ویژگی justifyContent