CSS flex-flow प्रॉपर्टी - दिशा और रैप एक साथ

flex-flow शॉर्टहैंड प्रॉपर्टी flex-direction और flex-wrap को एक ही घोषणा में सेट करती है। यह फ्लेक्स कंटेनर के प्रवाह व्यवहार को संक्षिप्त रूप से परिभाषित करती है।

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      flex-flow: column wrap;  /* flex-direction: column; flex-wrap: wrap; */
      gap: 10px;
      padding: 10px;
      height: 300px;  /* रैप ट्रिगर के लिए ऊंचाई सीमा */
    }
    .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-flow सिंटैक्स और सामान्य मान

flex-flow: <flex-direction> <flex-wrap>;

/* सबसे सामान्य संयोजन */
flex-flow: row wrap;           /* हॉरिजॉन्टल, रैप के साथ - रिस्पॉन्सिव ग्रिड */
flex-flow: column wrap;        /* वर्टिकल, रैप के साथ */
flex-flow: row nowrap;         /* डिफ़ॉल्ट: हॉरिजॉन्टल, सिंगल लाइन */
flex-flow: column nowrap;      /* वर्टिकल, सिंगल लाइन */
flex-flow: row-reverse wrap;   /* उल्टा हॉरिजॉन्टल, रैप के साथ */

मीडिया क्वेरी में शक्तिशाली उपयोग

.container {
  display: flex;
  flex-flow: column wrap;  /* मोबाइल: वर्टिकल स्टैक */
}
@media (min-width: 768px) {
  .container {
    flex-flow: row wrap;   /* टैबलेट+: हॉरिजॉन्टल ग्रिड */
  }
}
@media (min-width: 1200px) {
  .container {
    flex-flow: row nowrap; /* बड़ी स्क्रीन: सिंगल रो */
  }
}

कब उपयोग करें

• दोनों प्रॉपर्टीज़ एक साथ सेट कर रहे हों
• कोड DRY (Don't Repeat Yourself) रखना चाहते हों
• रिस्पॉन्सिव ब्रेकपॉइंट्स पर दोनों बदलते हों