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

परिचय

HTML DOM Style flexBasis प्रॉपर्टी फ्लेक्स डिस्प्ले वाले एलिमेंट का प्रारंभिक आकार निर्दिष्ट करने के लिए उपयोग की जाती है। flex-basis के लिए auto के अलावा किसी अन्य मान के लिए यह प्रॉपर्टी width से अधिक प्राथमिकता रखती है।

सिंटैक्स

object.style.flexBasis = "number|auto|initial|inherit"

मान और विवरण

उदाहरण

<!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 = "फ्लेक्स बेसिस मान 200px तक बढ़ा दिया गया है";
  }
</script>
</head>
<body>
  <h2>डेमो हेडिंग</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>नीचे दिए गए बटन पर क्लिक करके div के अंदर मौजूद इमेज का फ्लेक्स बेसिस प्रॉपर्टी बदलें</p>
  <button onclick="changeFlexBasis()">फ्लेक्स बेसिस बदलें</button>
  <p id="Sample"></p>
</body>
</html>

आउटपुट

प्रारंभिक स्थिति:

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