CSS flex-direction: column-reverse से फ्लेक्स आइटम्स को वर्टिकल रिवर्स क्रम में व्यवस्थित करें

CSS flex-direction प्रॉपर्टी का column-reverse मान फ्लेक्स आइटम्स को कॉलम (वर्टिकल) दिशा में व्यवस्थित करता है लेकिन **रिवर्स क्रम में** (अंतिम आइटम पहले, पहला आइटम अंत में)।

उदाहरण

नीचे दिए गए उदाहरण में, flex-direction: column-reverse का उपयोग करके क्विज आइटम्स को नीचे से ऊपर (Q6, Q5, Q4... Q1) क्रम में व्यवस्थित किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      flex-direction: column-reverse;
      background-color: orange;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</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>

flex-direction के 4 मान:

• row (डिफ़ॉल्ट): लेफ्ट → राइट (हॉरिजॉन्टल)
• row-reverse: राइट → लेफ्ट (हॉरिजॉन्टल रिवर्स)
• column: टॉप → बॉटम (वर्टिकल)
• column-reverse: बॉटम → टॉप (वर्टिकल रिवर्स)

उपयोग: चैट संदेश (नए नीचे), लॉग एंट्रीज, नोटिफिकेशन फीड जहां नवीनतम पहले दिखना चाहिए।