HTML DOM Style flexDirection प्रॉपर्टी का उपयोग फ्लेक्स तत्वों के प्लेसमेंट की दिशा निर्धारित करने या वापस करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैफ्लेक्सडायरेक्शन प्रॉपर्टी सेट करना -
object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान <वें>विवरण | |
|---|---|
| पंक्ति | यह फ्लेक्स आइटम को क्षैतिज रूप से पंक्ति के रूप में प्रदर्शित करता है और डिफ़ॉल्ट मान है। |
| पंक्ति-रिवर्स | यह फ्लेक्स आइटम को क्षैतिज रूप से प्रदर्शित करता है लेकिन पंक्ति के विपरीत क्रम में। |
| column | फ्लेक्स आइटम को कॉलम के रूप में लंबवत रूप से प्रदर्शित करें। |
| कॉलम-रिवर्स | यह फ्लेक्स आइटम को लंबवत रूप से प्रदर्शित करता है लेकिन कॉलम के विपरीत क्रम में। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर पूर्वनिर्धारित करना। |
| उत्तराधिकारी | मूल संपत्ति मान को विरासत में मिला |
आइए फ्लेक्सडायरेक्शन प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The flex direction for the container div is changed to 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>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFlexDirection()">Change Flex Direction</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स दिशा बदलें . पर क्लिक करने पर "बटन -
