CSS जस्टिफाइ-कंटेंट प्रतियोगिता

परिभाषा और उपयोग

justify-content विशेषता (स्थिर) अनुक्रमित कंटेनर के अनुक्रमित आइटम्स को जब आइटम्स मुख्य अक्ष पर सभी उपलब्ध जगह का उपयोग नहीं करते हैं।

अभिजात्यःइसे उपयोग करें align-items विशेषता विशेषता वर्गीकृत संग्रह को अनुक्रमित करती है。

इसके अलावा देखेंः

CSS शिक्षणःCSS फ्लेक्सबॉक्स

CSS शिक्षणःCSS Grid

CSS संदर्भ दस्तावेज़:align-content विशेषता

CSS संदर्भ दस्तावेज़:align-items विशेषता

CSS संदर्भ दस्तावेज़:align-self गुण

HTML DOM संदर्भ दस्तावेज़:justifyContent गुण

उदाहरण

बाक्स के मध्य में लचीले एलिमेंट्स को जस्तीबद्ध करें:

div {
  display: flex;
  justify-content: center;
}

आप खुद संभवतः प्रयोग करें

इस पृष्ठ के नीचे और अधिक TIY उदाहरण पाएं।

CSS व्याकरण

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

गुण मूल्य

मूल्य वर्णन
flex-start डिफ़ॉल्ट मूल्य। एलिमेंट्स को बाक्स के शुरू में स्थित करें。
flex-end एलिमेंट्स को बाक्स के अंत में स्थित करें。
center एलिमेंट्स को बाक्स के मध्य में स्थित करें。
space-between एलिमेंट्स को सरणी के बीच अंतराल छोड़ दें。
space-around एलिमेंट्स को सरणी के पहले, बीच में और बाद में स्थान छोड़ दें。
initial इस गुण को अपने डिफ़ॉल्ट मूल्य पर सेट करें। देखें: initial。
inherit इस गुण को अपने माता एलिमेंट से विरासत करें। देखें: inherit。

तकनीकी विवरण

डिफ़ॉल्ट मूल्य: flex-start
विरासत: नहीं
एनिमेशन निर्माण: इसे समर्थित नहीं किया गया है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जावास्क्रिप्ट व्याकरण: object.style.justifyContent="space-between"

और अधिक उदाहरण

उदाहरण

बाक्स के शुरू में लचीले एलिमेंट्स को जस्तीबद्ध करें (डिफ़ॉल्ट):

div {
  display: flex;
  justify-content: flex-start;
}

आप खुद संभवतः प्रयोग करें

उदाहरण

बाक्स के अंत में लचीले एलिमेंट्स को जस्तीबद्ध करें:

div {
  display: flex;
  justify-content: flex-end;
}

आप खुद संभवतः प्रयोग करें

उदाहरण

सरणी के बीच अंतराल सहित लचीले एलिमेंट्स को दिखाएं:

div {
  display: flex;
  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