HTML DOM Style flexDirection प्रॉपर्टी

परिचय

HTML DOM Style flexDirection प्रॉपर्टी का उपयोग फ्लेक्स एलिमेंट्स की दिशा सेट करने या वापस करने के लिए किया जाता है। यह फ्लेक्स कंटेनर में आइटम्स के लेआउट को नियंत्रित करता है।

सिंटैक्स

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

मान और विवरण

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
  #demo {
    box-shadow: 0 0 0 3px #a323c3;
    display: flex;
    flex-direction: column-reverse;
  }
  #demo div {
    margin: auto;
    border: thin solid green;
  }
</style>
<script>
  function changeFlexDirection() {
    document.getElementById("demo").style.flexDirection = "row-reverse";
    document.getElementById("Sample").innerHTML = "कंटेनर div की फ्लेक्स दिशा row-reverse में बदल दी गई है";
  }
</script>
</head>
<body>
  <div id="demo">
    <div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div>
    <div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
    <div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div>
    <div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
  </div>
  <p>नीचे दिए गए बटन पर क्लिक करके ऊपर के कंटेनर div की फ्लेक्स दिशा बदलें</p>
  <button onclick="changeFlexDirection()">फ्लेक्स दिशा बदलें</button>
  <p id="Sample"></p>
</body>
</html>

आउटपुट

प्रारंभिक स्थिति में कंटेनर div:

"फ्लेक्स दिशा बदलें" बटन पर क्लिक करने के बाद: