CSS में फ्लेक्स पर टाइलिंग
आइए अब फ्लेक्सबॉक्स पर टाइलिंग करना सीखते हैं। सबसे पहले, फ्लेक्स ब्लॉकों को कई पंक्तियों में व्यवस्थित करें, प्रति पंक्ति तीन ब्लॉक के साथ।
इसके लिए, फ्लेक्स के पैरेंट की चौड़ाई
300px और flex-wrap का मान
wrap पर सेट करें, और चाइल्ड की चौड़ाई 100px पर:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
आइए अब हमारे ब्लॉकों के बीच क्षैतिज रूप से दूरी बनाएं। इसके लिए, मार्जिन के लिए अतिरिक्त जगह देने के लिए पैरेंट की चौड़ाई बढ़ाएं।
चूंकि हमारे पास एक पंक्ति में तीन ब्लॉक हैं, इसका मतलब है
कि उनके बीच दो अंतराल हैं। मान लीजिए कि हम
चाहते हैं कि प्रत्येक अंतराल की चौड़ाई 10px हो। इसका
मतलब है कि पैरेंट की चौड़ाई
को 20px से बढ़ाने की आवश्यकता है, यानी
300px नहीं, बल्कि 320px करें।
आइए अब ब्लॉकों के पैरेंट को justify-content
को space-between मान पर सेट करें और
ब्लॉकों के बीच वांछित दूरी प्राप्त करें:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
आइए अब ब्लॉकों के बीच ऊर्ध्वाधर रूप से भी इतनी ही दूरी जोड़ें।
इसके लिए, align-content प्रॉपर्टी को
space-between मान पर सेट किया जा सकता है।
हालाँकि, इसके लिए पैरेंट को ऊँचाई देनी होगी,
अन्यथा align-content काम नहीं करेगा।
आइए ऊँचाई को 320px पर सेट करें।
इस स्थिति में, हमारे पास ठीक तीन
पंक्तियों के ब्लॉक 100px ऊँचे और
पंक्तियों के बीच दो मार्जिन 10px के साथ समा जाएंगे।
आइए रन करें:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
width: 320px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
सब कुछ बढ़िया काम कर रहा है, लेकिन कुछ समस्याएं हैं जिन पर हम अगले पाठ में विचार करेंगे।
