HTML DOM स्टाइल फ्लेक्स प्रॉपर्टी का उपयोग फ्लेक्स पर सेट डिस्प्ले प्रॉपर्टी वाले तत्वों के लिए लचीली लंबाई को सेट करने या वापस करने के लिए किया जाता है। इसका उपयोग flexGrow, flexShrink और flexBasis गुणों में हेरफेर करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैफ्लेक्स प्रॉपर्टी सेट करना -
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
निम्नलिखित मान हैं -
| मान <वें>विवरण | |
|---|---|
| flex-grow | यह दी गई संख्या के आधार पर आइटम को शेष लचीले आइटम के सापेक्ष बढ़ाता है। |
| flex-srink | यह दी गई संख्या के आधार पर आइटम को बाकी लचीले आइटम के सापेक्ष सिकोड़ता है। संख्या निर्दिष्ट करती है कि शेष लचीली वस्तुओं के सापेक्ष आइटम कितना सिकुड़ जाएगा |
| फ्लेक्स-आधार | आइटम की लंबाई निर्दिष्ट करने के लिए और कोई कानूनी लंबाई इकाई लेता है। |
| स्वतः | तीन फ्लेक्स गुणों को 1 1 ऑटो के रूप में सेट करता है। |
| प्रारंभिक | फ्लेक्स प्रॉपर्टी को डिफ़ॉल्ट मान पर सेट करता है जो 0 1 ऑटो है। |
| कोई नहीं | समान 0 0 ऑटो। |
| उत्तराधिकारी | मूल संपत्ति मान को विरासत में मिला |
आइए फ्लेक्स प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even){
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd){
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex="none";
document.getElementsByTagName("DIV")[4].style.flex="none";
document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>Change the above divs flex property by clicking the below button</p>
<button onclick="changeFlex()">Change Flex</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स बदलें . पर क्लिक करने पर ” -
