CSS flex-direction: row - फ्लेक्स आइटम्स को हॉरिजॉन्टल व्यवस्थित करें

flex-direction: row (डिफ़ॉल्ट मान) फ्लेक्स आइटम्स को मुख्य अक्ष (मेन एक्सिस) पर बाएं से दाएं हॉरिजॉन्टल रूप से व्यवस्थित करता है।

उदाहरण: row दिशा में फ्लेक्स आइटम्स

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      flex-direction: row;  /* डिफ़ॉल्ट, स्पष्ट रूप से लिखना वैकल्पिक */
      background-color: orange;
      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>
</body>
</html>

row vs row-reverse

राइट-टू-लेफ्ट (RTL) भाषाओं के लिए

.container {
  display: flex;
  flex-direction: row;  /* LTR के लिए डिफ़ॉल्ट */
}

/* RTL में स्वचालित रूप से उल्टा हो जाता है अगर dir="rtl" हो */
<html dir="rtl">
  <div class="container">...</div>
</html>

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

.nav {
  display: flex;
  flex-direction: column;  /* मोबाइल: वर्टिकल */
}
@media (min-width: 768px) {
  .nav {
    flex-direction: row;  /* डेस्कटॉप: हॉरिजॉन्टल */
  }
}