CSS flex-wrap प्रॉपर्टी - फ्लेक्स आइटम्स रैप हों या नहीं

flex-wrap प्रॉपर्टी निर्दिष्ट करती है कि फ्लेक्स आइटम्स एक ही लाइन में रहने के लिए मजबूर होंगे या आवश्यकतानुसार कई लाइनों में रैप (wrap) होंगे।

उदाहरण: flex-wrap: wrap

कंटेनर की चौड़ाई से अधिक आइटम्स होने पर वे स्वचालित रूप से अगली लाइन में चले जाते हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>क्विज़</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
    <div>Q9</div>
  </div>
</body>
</html>

flex-wrap के तीन मान

क्रॉस-एक्सिस दिशा

• flex-direction: row → लाइनें टॉप से बॉटम (wrap) या बॉटम से टॉप (wrap-reverse)
• flex-direction: column → लाइनें लेफ्ट से राइट (wrap) या राइट से लेफ्ट (wrap-reverse)

शॉर्टहैंड: flex-flow

flex-flow: row wrap;      /* direction + wrap */
flex-flow: column wrap;   /* वर्टिकल ग्रिड */

रिस्पॉन्सिव ग्रिड पैटर्न

.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.responsive-grid > * {
  flex: 1 1 300px;  /* न्यूनतम 300px, उपलब्ध स्थान में ग्रो */
}