फ्लेक्स-रैप गुण

flex-wrap गुण मुख्य अक्ष के साथ बहु-पंक्ति ब्लॉक व्यवस्था निर्धारित करता है। यह फ्लेक्स ब्लॉकों के लिए मूल तत्व पर लागू होता है। यह संक्षिप्त गुण flex-flow का हिस्सा है।

सिंटैक्स

सेलेक्टर {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

मान

मान	विवरण
`nowrap`	एकल-पंक्ति मोड - ब्लॉक एक ही पंक्ति में व्यवस्थित होते हैं।
`wrap`	ब्लॉक कई पंक्तियों में व्यवस्थित होते हैं, यदि वे एक पंक्ति में फिट नहीं होते हैं।
`wrap-reverse`	`wrap` के समान ही, लेकिन ब्लॉक विपरीत क्रम में व्यवस्थित होते हैं (पहले अंतिम, फिर पहला)।

डिफ़ॉल्ट मान: nowrap.

उदाहरण . wrap मान

अब ब्लॉक अपने कंटेनर में फिट नहीं होंगे और कई पंक्तियों में व्यवस्थित होंगे:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

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

उदाहरण . wrap-reverse मान

और अब क्रम उलटा हो जाएगा (ब्लॉकों के अंदर की संख्याओं को देखें):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

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

उदाहरण . nowrap मान

अब ब्लॉक एकल-पंक्ति मोड में स्थित होंगे (डिफ़ॉल्ट रूप से ऐसा ही होता है)। इस स्थिति में, ब्लॉकों के लिए width का मान अनदेखा कर दिया जाएगा, यदि यह ब्लॉकों के मूल तत्व में फिट होने में बाधा डालता है। ध्यान दें कि ब्लॉक मूल तत्व में फिट हो गए हैं, लेकिन उनकी वास्तविक चौड़ाई 100px नहीं है, जैसा कि उन्हें दिया गया था, बल्कि उससे कम है:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

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

उदाहरण . nowrap मान

हालाँकि, यदि ब्लॉक दी गई चौड़ाई पर फिट होते हैं - तो width गुण को अनदेखा नहीं किया जाएगा। ब्लॉकों की संख्या कम करते हैं ताकि वे सभी फिट हो जाएँ:

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

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

यह भी देखें

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