CSS flex-direction प्रॉपर्टी - फ्लेक्स आइटम्स की दिशा निर्दिष्ट करें

flex-direction प्रॉपर्टी फ्लेक्स कंटेनर के मेन एक्सिस (मुख्य अक्ष) की दिशा निर्दिष्ट करती है, जिससे फ्लेक्स आइटम्स का प्रवाह क्रम निर्धारित होता है।

उदाहरण: column दिशा

आइटम्स ऊपर से नीचे वर्टिकल कॉलम में व्यवस्थित होते हैं।

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

चारों मान सारांश

लेखन मोड प्रभाव

/* RTL भाषाओं (अरबी, हिब्रू) में row उल्टा हो जाता है */
html[dir="rtl"] .container {
  /* flex-direction: row स्वचालित रूप से दाएं से बाएं हो जाता है */
}

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

flex-flow: column wrap;  /* direction + wrap एक साथ */