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