justify-content प्रॉपर्टी

justify-content प्रॉपर्टी फ्लेक्स ब्लॉक्स के लिए मुख्य अक्ष के साथ और ग्रिड्स के लिए हॉरिजॉन्टल अक्ष के साथ एलिमेंट्स का अलाइनमेंट सेट करती है। यह पैरेंट एलिमेंट पर एप्लाई होती है।

सिंटैक्स

सिलेक्टर {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

वैल्यूज

वैल्यू	डिस्क्रिप्शन
`flex-start`	ब्लॉक्स मुख्य (हॉरिजॉन्टल) अक्ष की शुरुआत में चिपके हुए हैं।
`flex-end`	ब्लॉक्स मुख्य (हॉरिजॉन्टल) अक्ष के अंत में चिपके हुए हैं।
`center`	ब्लॉक्स मुख्य (हॉरिजॉन्टल) अक्ष के सेंटर में हैं।
`space-between`	ब्लॉक्स मुख्य (हॉरिजॉन्टल) अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहला एलिमेंट अक्ष की शुरुआत से चिपका हुआ है, और आखिरी - अंत तक।
`space-around`	ब्लॉक्स मुख्य (हॉरिजॉन्टल) अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहले ब्लॉक और अक्ष की शुरुआत के बीच, आखिरी ब्लॉक और अक्ष के अंत के बीच भी वही गैप है, जो बाकी ब्लॉक्स के बीच है। हालांकि, वे बराबर नहीं हैं, जैसा कि लग सकता है: गैप्स जुड़ जाते हैं और दो ब्लॉक्स के बीच दूरी दोगुनी हो जाती है, बजाय ब्लॉक और अक्ष की शुरुआत/अंत के गैप के।

डिफॉल्ट वैल्यू: flex-start.

उदाहरण . flex-start वैल्यू

अभी अक्ष बाएं से दाएं की ओर डायरेक्टेड है (यह flex-direction: row करता है), और ब्लॉक्स बाईं ओर चिपके हुए हैं:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . flex-end वैल्यू

इस उदाहरण में अक्ष भी बाएं से दाएं की ओर डायरेक्टेड है, लेकिन ब्लॉक्स दाईं ओर चिपके हुए हैं, क्योंकि justify-content को flex-end वैल्यू में सेट किया गया है:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . center वैल्यू

अभी ब्लॉक्स सेंटर में होंगे चाहे मुख्य अक्ष की डायरेक्शन कुछ भी हो:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . space-between वैल्यू

ब्लॉक्स मुख्य अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहला एलिमेंट अक्ष की शुरुआत से चिपका हुआ है, और आखिरी - अंत तक:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . space-around वैल्यू

ब्लॉक्स मुख्य अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहले ब्लॉक और अक्ष की शुरुआत के बीच, आखिरी ब्लॉक और अक्ष के अंत के बीच भी वही गैप है, जो बाकी ब्लॉक्स के बीच है। हालांकि, गैप्स जुड़ जाते हैं और दो ब्लॉक्स के बीच की दूरी दोगुनी हो जाती है, बजाय ब्लॉक और अक्ष की शुरुआत/अंत के गैप के:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . center वैल्यू. अक्ष नीचे की ओर

मुख्य अक्ष की डायरेक्शन बदलते हैं, flex-direction को column वैल्यू में सेट करके:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . space-between वैल्यू. अक्ष नीचे की ओर

अभी ब्लॉक्स वर्टिकली इक्वली डिस्ट्रीब्यूट होंगे:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . हॉरिजॉन्टल अक्ष की शुरुआत के साथ अलाइनमेंट (पंक्तियाँ) ग्रिड में

आइए हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष की शुरुआत के साथ सेट करें:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

उदाहरण . हॉरिजॉन्टल अक्ष के सेंटर के साथ अलाइनमेंट ग्रिड में

और अब हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष के सेंटर के साथ सेट करें:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

उदाहरण . हॉरिजॉन्टल अक्ष के अंत के साथ अलाइनमेंट ग्रिड में

आइए हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष के अंत के साथ सेट करें:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

यह भी देखें

flex-direction प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स की अक्षों की डायरेक्शन सेट करती है
align-items प्रॉपर्टी,
जो क्रॉस अक्ष के साथ अलाइनमेंट सेट करती है
flex-wrap प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स की मल्टी-लाइन कैपेबिलिटी सेट करती है
flex-flow प्रॉपर्टी,
flex-direction और flex-wrap के लिए शॉर्टहैंड
order प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स का ऑर्डर सेट करती है
align-self प्रॉपर्टी,
जो एक ब्लॉक का अलाइनमेंट सेट करती है
flex-basis प्रॉपर्टी,
जो किसी खास फ्लेक्स ब्लॉक का साइज सेट करती है
flex-grow प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स की ग्रोथ फैक्टर सेट करती है
flex-shrink प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स की श्रिंक फैक्टर सेट करती है
flex प्रॉपर्टी,
flex-grow, flex-shrink और flex-basis के लिए शॉर्टहैंड