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

परिचय

HTML DOM Style flex प्रॉपर्टी का उपयोग उन एलिमेंट्स के लिए फ्लेक्सिबल लंबाई सेट करने या वापस करने के लिए किया जाता है जिनका डिस्प्ले प्रॉपर्टी flex पर सेट है। यह flexGrow, flexShrink और flexBasis प्रॉपर्टीज को मैनिपुलेट करने के लिए उपयोग की जाती है।

सिंटैक्स

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

मान और विवरण

मान	विवरण
`flex-grow`	दिए गए नंबर द्वारा शेष फ्लेक्सिबल आइटम्स के सापेक्ष आइटम को बढ़ाता है।
`flex-shrink`	दिए गए नंबर द्वारा शेष फ्लेक्सिबल आइटम्स के सापेक्ष आइटम को सिकोड़ता है। एक नंबर जो निर्दिष्ट करता है कि आइटम शेष फ्लेक्सिबल आइटम्स के सापेक्ष कितना सिकुड़ेगा।
`flex-basis`	आइटम की लंबाई निर्दिष्ट करने के लिए और किसी भी वैध लंबाई इकाई को लेता है।
`auto`	तीनों फ्लेक्स प्रॉपर्टीज को `1 1 auto` के रूप में सेट करता है।
`initial`	फ्लेक्स प्रॉपर्टी को डिफ़ॉल्ट मान `0 1 auto` पर सेट करता है।
`none`	`0 0 auto` के समान।
`inherit`	पैरेंट एलिमेंट से प्रॉपर्टी मान विरासत में लेता है।

उदाहरण

<!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 = "पहले और चौथे div का फ्लेक्स मान 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>नीचे दिए गए बटन पर क्लिक करके ऊपर के divs का फ्लेक्स प्रॉपर्टी बदलें</p>
  <button onclick="changeFlex()">फ्लेक्स बदलें</button>
  <p id="Sample"></p>
</body>
</html>

आउटपुट

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

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

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

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