HTML DOM स्टाइल flexFlow प्रॉपर्टी का उपयोग किसी तत्व के flexDirection और flexWrap प्रॉपर्टी को निर्दिष्ट करने के लिए किया जाता है। यह flexDirection और flexWrap के लिए एक शॉर्टहैंड है और उसी क्रम में मान स्वीकार करता है।
−
. के लिए वाक्य रचना निम्नलिखित हैflexFlow गुण सेट करना -
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| Value <वें शैली ="चौड़ाई:66.8707%;">विवरण | |
|---|---|
| फ्लेक्स-दिशा | इसका उपयोग लचीली वस्तुओं की दिशा को निर्दिष्ट करने के लिए किया जाता है और इसके मान पंक्ति, पंक्ति-रिवर्स, कॉलम, कॉलम-रिवर्स, इनिशियल और इनहेरिट हैं। इसका डिफ़ॉल्ट मान पंक्ति है। |
| फ्लेक्स-रैप | इसका उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि लचीली वस्तुओं को लपेटना चाहिए या नहीं। इसके मान अब्रैप, रैप, रैप-रिवर्स, इनिशियल और इनहेरिट हैं। इसका डिफ़ॉल्ट मान isnowrap है। |
| प्रारंभिक | इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए फ्लेक्सफ्लो प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 600px;
height: 190px;
border:1px solid black;
display: flex;
flex-flow: row-reverse no-wrap;
}
#demo div {
width:100px;
height:100px;
}
</style>
<script>
function changeFlexFlow() {
document.getElementById("demo").style.flexFlow="row wrap";
document.getElementById("Sample").innerHTML="The flex flow property is now set to row wrap";
}
</script>
</head>
<body>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>1</div>
<div><img src="https://www.tutorialspoint.com/images/Swift.png"></div>
<div>2</div>
<div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
<div>3</div>
<div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>4</div>
<div><img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>5</div>
</div>
<p>Change the above container div flex flow property by clicking the below button</p>
<button onclick="changeFlexFlow()">Change Flex Flow</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स प्रवाह बदलें . पर क्लिक करने पर "बटन -
