CSS flex शॉर्टहैंड प्रॉपर्टी से फ्लेक्स आइटम के ग्रो, श्रिंक, बेसिस सेट करें

CSS flex शॉर्टहैंड प्रॉपर्टी flex-grow, flex-shrink, और flex-basis तीनों प्रॉपर्टीज को एक साथ सेट करती है। यह फ्लेक्स आइटम के लचीलेपन को नियंत्रित करने का संक्षिप्त तरीका है।

उदाहरण

नीचे दिए गए उदाहरण में, चौथे आइटम (Q4) पर flex: 20 0 350px लागू किया गया है जिसका अर्थ है: ग्रो फैक्टर 20, श्रिंक फैक्टर 0, बेसिस 350px।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div style="flex: 20 0 350px">Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
    <div>Q9</div>
  </div>
</body>
</html>

flex सिंटैक्स: flex: <flex-grow> <flex-shrink> <flex-basis>

• flex-grow: अतिरिक्त जगह में हिस्सा (डिफ़ॉल्ट 0)
• flex-shrink: जगह कम होने पर सिकुड़ने का अनुपात (डिफ़ॉल्ट 1)
• flex-basis: प्रारंभिक आकार (डिफ़ॉल्ट auto)

सामान्य कीवर्ड मान:

• flex: initial = 0 1 auto (डिफ़ॉल्ट)
• flex: auto = 1 1 auto
• flex: none = 0 0 auto (निश्चित आकार)
• flex: <number> = <number> 1 0 (जैसे flex: 1 = 1 1 0)