align-self प्रॉपर्टी

align-self प्रॉपर्टी एक अकेले फ्लेक्स ब्लॉक के लिए क्रॉस एक्सिस के साथ और ग्रिड में एक अकेले एलिमेंट के लिए वर्टिकल एक्सिस के साथ अलाइनमेंट सेट करती है। मूल रूप से यह प्रॉपर्टी align-items प्रॉपर्टी को रिप्रेजेंट करती है, लेकिन एक स्पेसिफिक ब्लॉक के लिए।

सिंटैक्स

सेलेक्टर {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

वैल्यूज

वैल्यू	डिस्क्रिप्शन
`flex-start`	ब्लॉक क्रॉस एक्सिस की शुरुआत में चिपक जाता है।
`flex-end`	ब्लॉक क्रॉस एक्सिस के अंत में चिपक जाता है।
`center`	ब्लॉक क्रॉस एक्सिस के सेंटर में होता है।
`baseline`	ब्लॉक अपनी बेसलाइन के साथ अलाइन हो जाता है। बेसलाइन एक काल्पनिक लाइन है, जो लटकने वाले हिस्सों को ध्यान में रखे बिना करैक्टर्स के निचले एज से गुजरती है, उदाहरण के लिए, जैसे `'p'`, `'q'`, `'y'`, `'g'` अक्षरों में होता है।
`stretch`	ब्लॉक खिंच जाता है, क्रॉस एक्सिस के साथ सारी उपलब्ध जगह ले लेता है, फिर भी `min-width` और `max-width` को ध्यान में रखा जाता है, अगर वे सेट हैं। अगर एलिमेंट के लिए चौड़ाई और ऊंचाई सेट है - `stretch` को इग्नोर कर दिया जाएगा।
`auto`	ब्लॉक उस तरह अलाइन होगा, जैसा `align-items` प्रॉपर्टी में सेट है।

डिफॉल्ट वैल्यू: auto।

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

इस उदाहरण में सभी ब्लॉक्स को flex-start वैल्यू सेट है (align-items प्रॉपर्टी), और तीसरे ब्लॉक को - align-self वैल्यू stretch में सेट है:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

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

इस उदाहरण में सभी ब्लॉक्स के लिए align-items प्रॉपर्टी की वैल्यू flex-start सेट है, और तीसरे ब्लॉक के लिए - align-self वैल्यू flex-end में सेट है:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

उदाहरण . ग्रिड में वर्टिकल एक्सिस की शुरुआत के साथ अलाइनमेंट

आइए पहले एलिमेंट के लिए वर्टिकल एक्सिस की शुरुआत के साथ अलाइनमेंट सेट करते हैं:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

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

आइए पहले एलिमेंट के लिए वर्टिकल एक्सिस के सेंटर के साथ अलाइनमेंट सेट करते हैं:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

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

आइए ग्रिड में हमारे पहले एलिमेंट के लिए वर्टिकल एक्सिस के अंत के साथ अलाइनमेंट सेट करते हैं:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: end;
}

यह भी देखें

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