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

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

सिंटैक्स

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

मान

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

उदाहरण . wrap मान

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

html<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>

css#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 मान

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

html<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>

css#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 नहीं है, जैसा कि उन्हें दिया गया था, बल्कि उससे कम है:

html<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>

css#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 गुण को अनदेखा नहीं किया जाएगा। ब्लॉकों की संख्या कम करते हैं ताकि वे सभी फिट हो जाएँ:

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

css#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;
}

Результат:

यह भी देखें