تعریف و کاربرد
زمانی که آیتم ها از تمام فضای موجود در جهت افقی استفاده نکنند، ویژگی 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