CSS flex शॉर्टहैंड - flex-grow, flex-shrink, flex-basis एक साथ

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

उदाहरण: flex शॉर्टहैंड का उपयोग

Q4 के लिए flex: 20 0 350px सेट किया गया है: ग्रो फैक्टर 20, श्रिंक नहीं, बेसिस 350px।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      gap: 10px;
      padding: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>क्विज़</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: 1;           /* flex: 1 1 0% - समान रूप से ग्रो/श्रिंक */
flex: auto;        /* flex: 1 1 auto - कंटेंट आकार, फिर ग्रो/श्रिंक */
flex: none;        /* flex: 0 0 auto - न ग्रो, न श्रिंक */
flex: 2 1 300px;   /* ग्रो:2, श्रिंक:1, बेसिस:300px */
flex: 0 0 200px;   /* फिक्स्ड चौड़ाई 200px */

व्यक्तिगत प्रॉपर्टीज़

सिफारिश

लगभग हमेशा flex शॉर्टहैंड का उपयोग करें - यह ब्राउज़र को सही ढंग से गणना करने देता है और कोड साफ रखता है।