صفت justify-content در css

صفت justify-content در css محور اصلی main-axis

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی جدید justify-content در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی justify-content در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی جدید justify-content در زبان طراحی css

به کمک ویژگی justify-content در CSS3 می توانیم عناصر داخلی را نسبت به محور اصلی ( main-axis ) ، هم ترازسازی کنیم.

ویژگی justify-content همچنین بر روی عناصری که به خط بعد سرریز می شوند، هم تاثیر می گذارد.

مقادیر صفت جدید justify-content در زبان طراحی css

صفت جدید justify-content که در زبان طراحی CSS3 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:

1. مقدار flex-start
2. مقدار flex-end
3. مقدار center 
4. مقدار space-between
5. مقدار space-around
6. مقدار initial
7. مقدار inherit

مقدار flex-start درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار flex-start تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و در ابتدای تگ html پدر خود یا container هم ترازسازی می شوند.

شکل زیر به خوبی حالت flex-start را در تگ های فرزند نارنجی رنگ نسبت به تگ والد بنفش رنگ نشان می دهد:

مقدار flex-end درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار flex-end تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و در انتهای تگ html پدر خود یا container هم ترازسازی می شوند.

شکل زیر به خوبی حالت flex-end را در تگ های فرزند نارنجی رنگ نسبت به تگ والد بنفش رنگ شان می دهد:

صفت justify-content در css محور اصلی main-axis

مقدار center درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار center تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و وسط چین نسبت به تگ html پدر خود یا container هم ترازسازی می شوند.

شکل زیر به خوبی حالت center را در تگ های فرزند نارنجی رنگ نسبت به تگ والد بنفش رنگ نشان می دهد:

مقدار space-between درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار space-between تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و با فواصل مساوی در بین تگ ها در هر ردیف و نسبت به تگ html پدر خود یا container هم ترازسازی می شوند.

شکل زیر به خوبی حالت space-between را در تگ های فرزند نارنجی رنگ نسبت به تگ والد بنفش رنگ نشان می دهد:

مقدار space-around درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار space-around تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و با فواصل مساوی در اطراف و حاشیه تگ ها ( بین ردیف ها ) و نسبت به تگ html پدر خود یا container هم ترازسازی می شوند.

شکل زیر به خوبی حالت space-around را در تگ های فرزند نارنجی رنگ نسبت به تگ والد بنفش رنگ نشان می دهد:

مقدار initial درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار initial تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود و در موقعیت پیش فرض ( تنطیمات CSS Specification ) هم ترازسازی می شوند.

مقدار inherit درون خاصیت justify-content در زبان سی اس اس

اگر خاصیت justify-content را برای یک تگ نگهدارنده ( container ) که درون آن تگ های html فرزند قرار دارد، برابر با مقدار inherit تعریف کنیم، تگ های فرزند که در چند ردیف قرار دارند، در وضعیت عمود، موقعیت تگ html پدر خود یا container ، را به ارث برده و براساس آن هم ترازسازی می شوند.

صفت justify-content در css محور اصلی main-axis

بررسی خاصیت justify-content از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی justify-content در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت justify-content در زبان طراحی سی اس اس

عناوین ساختاری خاصیت justify-content	وضعیت ساختاری خاصیت justify-content
مقدار پیش فرض	flex-start
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.justifyContent="space-between

پشتیبانی مرورگرهای اینترنتی از خاصیت justify-content در زبان طراحی سی اس اس

خاصیت css
justify-content	29.0 و 21.0 با -webkit-	11.0	28.0 و 18.0 با -moz-	9.0 و 6.1 با -webkit-	17.0