HTML DOM स्टाइल flexBasis प्रॉपर्टी का उपयोग फ्लेक्स डिस्प्ले वाले तत्व के प्रारंभिक आकार को निर्दिष्ट करने के लिए किया जाता है। फ्लेक्स-आधार के लिए ऑटो के अलावा किसी भी अन्य मूल्य के लिए flexBasis संपत्ति की चौड़ाई की तुलना में उच्च प्राथमिकता है।
−
. के लिए वाक्य रचना निम्नलिखित हैflexBasis गुण सेट करना -
object.style.flexBasis = "number|auto|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान <वें>विवरण | |
|---|---|
| संख्या | लचीली वस्तुओं को प्रारंभिक लंबाई प्रतिशत या किसी भी कानूनी लंबाई इकाई में निर्दिष्ट करना। |
| ऑटो | लचीली वस्तु की लंबाई के बराबर लंबाई निर्धारित करता है। यदि लंबाई निर्दिष्ट नहीं है तो यह इसकी सामग्री के अनुसार होगा। यह व्यतिक्रम मूल्य है। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर पूर्वनिर्धारित करना। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को विरासत में मिला |
आइए flexBasis गुण के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="The flex basis value is increased to 200px";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Change the flex basis property for the image present inside divs by clicking the below button</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“फ्लेक्स आधार बदलें . पर क्लिक करने पर "बटन -
