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

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

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

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

अगर आपको बॉक्स को स्ट्रेच करके अगली लाइन में रैप करने के साथ-साथ, उसमें खाली जगह भरनी है, तो <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>

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

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