मैं एक कार्ड-स्टाइल लेआउट बना रहा हूं, जिसमें व्यक्तिगत कार्ड लंबवत ढेर होते हैं। उच्च स्क्रीन चौड़ाई पर, कार्ड के अधिक से अधिक कॉलम का उपयोग किया जाता है - जितना संभव हो सके छोटे लंबवत स्थान का उपयोग करना।क्या फ्लेक्सबॉक्स आइटम अपने कंटेनर को विस्तारित करने के बजाय लपेटना पसंद कर सकते हैं?
मैं ऐसा करने के लिए flex-flow: column wrap लेआउट का उपयोग कर रहा हूं। हालांकि, मुझे लगता है कि कार्ड को लपेटने के लिए प्रोत्साहित करने के लिए कंटेनर को height या max-height होना आवश्यक है। यह देखते हुए कि कार्ड की संख्या और उनके व्यक्तिगत आकार में परिवर्तन हो सकता है, मैं यह नहीं बता सकता कि यह ऊंचाई आइटम को काट दिए बिना या नीचे अत्यधिक जगह होने के बिना बेहतर रूप से क्या होगी।
क्या कोई मुझे बता सकता है कि यह संभव है, या यदि मैं कुछ गलत कर रहा हूं?
स्निपेट संलग्न।
.card-container {
display: flex;
flex-flow: column wrap;
align-items: stretch;
}
.card {
flex: 0 0 auto;
width: 15rem;
margin: 0.5rem;
background-color: #f4f4f4;
/* max-height: ??? */
}<div class="card-container">
<div class="card" style="height: 20em"></div>
<div class="card" style="height: 17em"></div>
<div class="card" style="height: 5em"></div>
<div class="card" style="height: 10em"></div>
<div class="card" style="height: 21em"></div>
<div class="card" style="height: 10em"></div>
<div class="card" style="height: 17em"></div>
<div class="card" style="height: 8em"></div>
<div class="card" style="height: 20em"></div>
<div class="card" style="height: 16em"></div>
<div class="card" style="height: 19em"></div>
<div class="card" style="height: 10em"></div>
<div class="card" style="height: 5em"></div>
</div>
मुझे अक्सर इस समस्या का सामना करना पड़ा है। स्तंभ-दिशा में लपेटने के लिए फ्लेक्स आइटम प्राप्त करने के लिए, ऊंचाई को परिभाषित करने की आवश्यकता है। SMH। पंक्ति-दिशा में समस्या नहीं होती है। मुझे अभी तक कोई समाधान नहीं मिला है। इससे भी बदतर, एक बार जब आप उस समस्या को हल करेंगे, तो आपको इससे निपटने की आवश्यकता होगी: http://stackoverflow.com/q/33891709/3597276 –