यह मार्केटिंग साइटों के लिए एक सामान्य लेआउट है. उदाहरण के लिए, इसमें तीन आइटम की एक लाइन हो सकती है. आम तौर पर, इसमें एक इमेज, टाइटल, और फिर कुछ टेक्स्ट होता है, जिसमें किसी प्रॉडक्ट की कुछ सुविधाओं के बारे में बताया जाता है. छोटी स्क्रीन पर, आपको उन्हें अच्छी तरह से स्टैक करना होगा. साथ ही, स्क्रीन का साइज़ बढ़ाने पर, उन्हें बड़ा करना होगा.
इस इफ़ेक्ट के लिए फ़्लेक्सबॉक्स का इस्तेमाल करने पर, स्क्रीन के साइज़ में बदलाव होने पर, आपको इन एलिमेंट की जगह में बदलाव करने के लिए मीडिया क्वेरी की ज़रूरत नहीं पड़ेगी.
flex शॉर्टहैंड का मतलब है: 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>
सीएसएस
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}