डीकंस्ट्रक्ट किया गया पैनकेक

यह मार्केटिंग साइटों के लिए एक सामान्य लेआउट है. उदाहरण के लिए, इसमें तीन आइटम की एक पंक्ति हो सकती है. इसमें आम तौर पर इमेज, शीर्षक, और फिर टेक्स्ट शामिल होता है, जो प्रॉडक्ट की सुविधाओं की जानकारी देता है. हो सकता है कि छोटी स्क्रीन पर, आपको उन्हें अच्छी तरह से स्टैक करने और स्क्रीन का साइज़ बढ़ाने पर उन्हें बड़ा करने की ज़रूरत होगी.

इस इफ़ेक्ट के लिए फ़्लेक्सबॉक्स का इस्तेमाल करने पर, आपको स्क्रीन का साइज़ बदलने पर इन एलिमेंट का प्लेसमेंट बदलने के लिए मीडिया क्वेरी की ज़रूरत नहीं पड़ेगी.

फ़्लेक्स शॉर्टहैंड का मतलब है: flex: <flex-grow> <flex-shrink> <flex-basis>.

flex-grow स्ट्रेचिंग

अगर आपको बॉक्स को फैलाकर खाली करना है, तो अगली लाइन तक रैप होने पर, <flex-grow> की वैल्यू को 1 पर सेट करें. उदाहरण के लिए:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

अब, स्क्रीन का साइज़ बढ़ाने या घटाने पर, ये फ़्लेक्स आइटम भी छोटे हो जाते हैं और बड़े भी हो जाते हैं.

कोई स्ट्रेचिंग नहीं

अगर आप चाहते हैं कि आपके बॉक्स अपने <flex-basis> आकार में भर जाएं, तो छोटे साइज़ को सिकोड़ें, लेकिन ज़्यादा जगह भरने के लिए फैलाएं नहीं, लिखें: flex: 0 1 <flex-basis>. इस मामले में, आपका <flex-basis> 150 पिक्सल है:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

एचटीएमएल

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}