CSS flex-direction: row-reverse - दाएं से बाएं हॉरिजॉन्टल

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

उदाहरण: row-reverse दिशा

आइटम्स HTML में Q1-Q6 क्रम में हैं लेकिन दाएं से बाएं दिखते हैं: Q6, Q5, Q4, Q3, Q2, Q1।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      flex-direction: row-reverse;
      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 तुलना

HTML क्रम: Q1, Q2, Q3, Q4, Q5, Q6

flex-direction: row        →  [Q1] [Q2] [Q3] [Q4] [Q5] [Q6]  (बाएं→दाएं)
flex-direction: row-reverse →  [Q6] [Q5] [Q4] [Q3] [Q2] [Q1]  (दाएं→बाएं)

मेन-स्टार्ट/एंड पर प्रभाव

उपयोग मामले

• RTL (राइट-टू-लेफ्ट) भाषाओं के लिए लेआउट
• विज़ुअल क्रम बदलना बिना HTML बदले
• ड्रॉपडाउन मेनू को दाएं संरेखित करना

एक्सेसिबिलिटी नोट

चेतावनी: row-reverse केवल दृश्य क्रम बदलता है। स्क्रीन रीडर्स और कीबोर्ड नेविगेशन (Tab क्रम) DOM क्रम (Q1→Q6) का पालन करते हैं। तार्किक क्रम के लिए HTML सही रखें।