कॉलम में तत्वों को समान रूप से वितरित करें

Question

मेरे पास .wrap नामक एक एकल div है जिसमें आइटम रखा गया है। वस्तुओं की एक अज्ञात राशि (.thing) चार कॉलम (एक दूसरे के शीर्ष पर ढेर) में व्यवस्थित की जानी चाहिए।

<div class="wrap"> 
    <div class="thing"> thing1 </div> 
    <div class="thing"> thing2 </div> 
    ... 
</div> 

कॉलम को समान रूप से वितरित करने की आवश्यकता है ताकि कोई कॉलम खाली न हो। इस का उपयोग करते हुए बहुत ही आसान होगा:

.wrap { 
    column-count: 4; 
    column-fill: balance; 
} 

हालांकि, column-fill केवल फ़ायरफ़ॉक्स में काम करता है, मेरा मानना ​​है कि।

ब्राउज़र के सभी हाल के संस्करणों में इस लेआउट को प्राप्त करने के लिए कोई अन्य सीएसएस विधि है? विशेष रूप से, क्या फ्लेक्सबॉक्स यहां मदद करने में सक्षम होगा?

कृपया ध्यान दें कि मैं कॉलम के रूप में कार्य करने के लिए अतिरिक्त divs नहीं जोड़ सकता, और जेएस समाधान नहीं चाहता।

यहाँ एक बेला जो भी वितरण → http://jsfiddle.net/bpdtkmmt/

Answer 1

हाँ के अलावा इच्छित लेआउट है, आप का उपयोग flexbox यहाँ-और यह काम सबसे अधिक भाग के लिए किया जाना चाहिए कर सकते हैं। यह हैकी की तरह है और आपने सीएसएस कॉलम नियमों का उपयोग करके त्याग दिया है। कुछ हद तक कम परिवर्तनशीलता है, इसलिए यदि आप कोई और पंक्ति/कॉलम जोड़ते हैं, तो आपको मूल्यों को बदलना होगा। प्रति पंक्ति कॉलम की संख्या को संरक्षित करने के लिए, आपको रैपर के लिए एक निश्चित या प्रतिशत ऊंचाई निर्धारित करने की आवश्यकता होगी। वहां से, आप display: flex नियम के साथ एक फ्लेक्स कंटेनर के रूप में रैपर कंटेनर स्थापित करते हैं और flex-direction: column और flex-wrap: wrap या शॉर्टेंड flex-flow: column wrap का उपयोग करके एकाधिक कॉलम स्थापित करते हैं।

यह सुनिश्चित करने के लिए कि प्रत्येक कॉलम में इसमें x संख्याएं हैं, आपको flex-basis नियम का उपयोग करना होगा और उस कॉलम के प्रतिशत पर सेट करना होगा जिसे आप भरना चाहते हैं। तो 3 आइटम वाले कॉलम में flex-basis: 33.33% होगा। आपने संकेत दिया है कि आप 3 आइटमों की कई पंक्तियों को दो आइटमों की दो पंक्तियां चाहते हैं, इसलिए nth-child या nth-of-type चयनकर्ता को 50% का नया फ्लेक्स-आधार 10 वीं तत्व से शुरू करने के लिए चयन करने की आवश्यकता होगी। और निश्चित रूप से, आपको उस चौड़ाई के लिए प्रतिशत स्थापित करना होगा, जिसे आप पृष्ठ पर आइटम तत्व लेना चाहते हैं (4 पंक्तियां = 25%)। सुनिश्चित करें कि सभी तत्वों को समान रूप से आकार के होते हैं बनाने के लिए, आप

उपयोग करने के लिए हालांकि, एक flexbox में पाठ केंद्रित एक समस्या बनी हुई है की जरूरत है और आप एक साथ flex या inline-flex को display की स्थापना करके फ्लेक्स कंटेनर के रूप में चीजों को स्थापित करने के लिए होगा flex-directioncolumn, text-align और justify-content गुण center पर सेट किए गए गुणों के साथ flex-direction।

justify-content: center; 
flex-direction: column; 
text-align: center 

http://jsfiddle.net/hxcnoxx9/10/

यह सीएसएस आपकी समस्याओं का समाधान करना चाहिए।

.wrap { 
    height: 180px; 
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.thing { 
    background: rgba(255, 255, 255, .2); 
    color: #fff; 
    width: 25%; 
    flex-basis: 33.33%; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

.thing:nth-child(1n+10) { 
    flex-basis: 50%; 
}