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

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

सिंटैक्स

सिलेक्टर {
	place-content: मुख्य_अक्ष क्रॉस_अक्ष;
}

उदाहरण . मुख्य अक्ष की शुरुआत और क्रॉस अक्ष के केंद्र के साथ अलाइनमेंट

अभी एलिमेंट्स मुख्य अक्ष के ऊपरी हिस्से से सटे हुए हैं और साथ ही क्रॉस अक्ष के केंद्र में हैं:

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

#parent {
	display: flex;
	place-content: start center;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	place-content: center end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	place-content: end start;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: grid;
	place-content: start end;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	place-content: center start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	place-content: end start;
	grid-template-columns: 100px 100px;
	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;
}

यह भी देखें

align-content प्रॉपर्टी,
जो क्रॉस या लंबवत अक्ष के साथ अलाइनमेंट सेट करती है
justify-content प्रॉपर्टी,
जो मुख्य अक्ष के साथ अलाइनमेंट सेट करती है