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

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

सिंटैक्स

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

वैल्यूज

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

डिफॉल्ट वैल्यू: stretch.

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

अभी मेन एक्सिस लेफ्ट से राइट की ओर है, और क्रॉस एक्सिस के साथ एलिमेंट्स पूरी ऊंचाई में स्ट्रेच हो गए हैं:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

उदाहरण . stretch वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स के लिए चौड़ाई और ऊंचाई सेट है, इसलिए align-items प्रॉपर्टी के लिए stretch वैल्यू को इग्नोर कर दिया जाएगा:

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

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

उदाहरण . flex-start वैल्यू बिना एलिमेंट साइज के

अभी एलिमेंट्स ऊपर की ओर अटैच होंगे:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

उदाहरण . flex-start वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स अब भी ऊपर की ओर अटैच होंगे, हालांकि उनकी चौड़ाई और ऊंचाई सेट होगी:

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

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

उदाहरण . flex-end वैल्यू + एलिमेंट के साइज

अभी एलिमेंट्स नीचे की ओर अटैच होंगे:

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

#parent {
	display: flex;
	align-items: 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;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . center वैल्यू, अलग-अलग साइज के एलिमेंट

अभी एलिमेंट्स की ऊंचाई अलग-अलग है (अभी वे टेक्स्ट से एक्सपैंड हो रहे हैं, लेकिन height भी सेट किया जा सकता है), सभी की चौड़ाई समान है, क्योंकि width प्रॉपर्टी सेट है:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

उदाहरण . baseline वैल्यू, अलग-अलग साइज के एलिमेंट

और इस तरह बेसलाइन अलाइनमेंट दिखता है:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	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;
	align-items: flex-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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	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 id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

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

और अब देखते हैं कि डिबगर के जरिए हमारा ग्रिड कैसा दिखता है:

यह भी देखें

flex-direction प्रॉपर्टी,
जो फ्लेक्स ब्लॉक्स के एक्सिस की दिशा सेट करती है
justify-content प्रॉपर्टी,
जो मेन एक्सिस के साथ अलाइनमेंट सेट करती है
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 के लिए शॉर्टहैंड