ویژگی CSS justify-content

تعریف و استفاده

ویژگی justify-content (水平和) برای تراز کردن عناصر انعطاف‌پذیر بکار ببرید، زمانی که عناصر تمام فضای قابل استفاده محور اصلی را اشغال نمی‌کنند.

توضیح:لطفاً از ویژگی align-items ویژگی‌ها را به صورت عمودی به هم پیچیده کنید.

لطفاً به: مراجعه کنید

آموزش CSS:flexbox CSS

آموزش CSS:گرید CSS

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;

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

زبان 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 زبان JavaScript:

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;

}

آزمایش کنید

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

ویژگی Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0