CSS جسست-کنتنت پروپری

تعریف اور استعمال

justify-content کا نمائش (افقی) انعطاف پذیر کیسٹمر کے پروجیکٹ کو مستقل کردیا گیا ہے، جب پروجیکٹ میں سارے قابل استعمال علاقے پر نہیں کا حصہ لیا جاتا ہے.

تذکر:استفاده کریں align-items کا نمائش خصوصیت کی عمودی تناظر کاری

دوسرے رجوعات:

CSS تعلیم:CSS flexbox

CSS تعلیم:CSS Grid

CSS 参考手册：align-content کا نمائش

CSS 参考手册：align-items کا نمائش

CSS 参考手册：دستورالعمل CSS

ویژگی align-selfدستورالعمل HTML DOM

justify-content: space-between;

ویژگی justifyContent

در ابتدای سطر، بین سطرها و در انتهای سطر، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
  div {
  پروژه‌های انعطاف‌پذیر را در وسط قالب هماهنگ کنید:
justify-content: space-around;

}

justify-content: center;

مثال‌های بیشتری در پایین صفحه پیدا می‌کنید.

جمله CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

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

inherit

جزئیات فنی مقدار پیش‌فرض:
flex-start وراثت:
خیر انیمیشن:پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن
。 نسخه:
CSS3 جمله برنامه‌نویسی:

object.style.justifyContent="space-between"

justify-content: space-between;

بیشتر مثال

در ابتدای سطر، بین سطرها و در انتهای سطر، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
  div {
  پروژه‌های انعطاف‌پذیر را در ابتدای قالب هماهنگ کنید (مقدار پیش‌فرض):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

در ابتدای سطر، بین سطرها و در انتهای سطر، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
  div {
  پروژه‌های انعطاف‌پذیر را در انتهای قالب هماهنگ کنید:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

در ابتدای سطر، بین سطرها و در انتهای سطر، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
  div {
  در بین سطرها، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
justify-content: space-around;

}

justify-content: space-between;

مثال

در ابتدای سطر، بین سطرها و در انتهای سطر، نمایش پروژه‌های انعطاف‌پذیر با فاصله:
  div {
  display: flex;
justify-content: space-around;

}

آزمایش کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند. از پیشوند -webkit- یا -moz- برای استفاده از نسخه اولین با پیشوند مشخص شده استفاده کنید.

ویژگی کروم آئی ای فایرفاکس سافاری اُپرا
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0