خصائص justify-content CSS

تعريف والاستخدام

خصائص 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 جملة الجافاسكربت:

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