संपत्ति align-content

संपत्ति align-content फ्लेक्स ब्लॉक्स के लिए क्रॉस अक्ष के साथ और ग्रिड के लिए लंबवत अक्ष के साथ तत्वों को संरेखित करती है। यह मूल तत्व पर लागू होती है।

सिंटैक्स

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

मान

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

उदाहरण . मान flex-start

इस उदाहरण में, वह अक्ष जिसके साथ संरेखण हो रहा है ऊपर से नीचे की ओर निर्देशित है, यानी यह क्रॉस है। प्राप्त परिणाम से जैसा देखा जा सकता है, हमारे सभी तत्व इसके ऊपरी भाग से दबे हुए हैं:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

उदाहरण . मान flex-end

इस उदाहरण में ब्लॉक क्रॉस अक्ष के निचले किनारे से दबे हुए हैं, क्योंकि संपत्ति align-content का मान flex-end पर सेट है:

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

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

#parent {
	display: flex;
	align-content: 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: grid;
	align-content: 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;
	align-content: 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>1</div>
	<div>2</div>
	<div>3</div>
</div>

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

यह भी देखें

संपत्ति flex-direction,
जो फ्लेक्स ब्लॉक्स की अक्षों की दिशा निर्धारित करती है
संपत्ति justify-content,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करती है
संपत्ति align-items,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करती है
संपत्ति flex-wrap,
जो फ्लेक्स ब्लॉक्स की मल्टीलाइन संपत्ति निर्धारित करती है
संपत्ति flex-flow,
flex-direction और flex-wrap के लिए संक्षिप्त रूप
संपत्ति order,
जो फ्लेक्स ब्लॉक्स का क्रम निर्धारित करती है
संपत्ति align-self,
जो एक ब्लॉक का संरेखण निर्धारित करती है
संपत्ति place-content,
जो मुख्य और क्रॉस अक्षों के साथ संरेखण निर्धारित करती है