मुझे फ्लेक्स के साथ समस्या है।कई आकारों के साथ सीएसएस फ्लेक्स गतिशील ग्रिड
मैं एक आवरण जहां 9 वर्गों के 1 के एक न्यूनतम और अधिकतम दिखाया जा सकता है है। ग्रिड में वर्गों की संख्या के आधार पर वर्गों में कई आकार हो सकते हैं। मैं सभी आवश्यक एक को छोड़कर काम कर मामलों मिल गया है, इस तस्वीर के रूप में देखा:
मेरे शैलियों रहे हैं:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
width: 300px;
height: 300px;
position: relative;
}
प्लस। छवियों की कुल संख्या और सूची में उनकी स्थिति के आधार पर आकार दिया गया है।
तो समस्या स्थिति में है जब मैं 1 बड़ा वर्ग और सही और नीचे से उसके चारों ओर 5 छोटे वर्गों (4 छोटे वर्गों का स्थान ले लेता है) है।
बड़ा व्यक्ति पहले होना चाहिए जैसा वह होना चाहिए।
उसे अगला (ऊपरी दाएं कोने) दूसरा एक, वह भी सही है।
तीसरा नीचे बाएँ कोने में है, और यह दूसरी पंक्ति में है और अब तक सही पर होना चाहिए। इस वजह से, सभी अन्य गलत स्थिति में हैं, इसलिए अंतिम व्यक्ति बह रहा है।
मैं justify-content
, align-content
, align-items
और align-self
के लिए मूल्य संयोजन का एक बहुत कोशिश की है लेकिन कुछ भी काम किया है।
मैं, वर्गों और स्थिति पूर्ण समाधान के टन करने के लिए वापस जाना होगा अगर वहाँ इस के लिए कोई फ्लेक्स समाधान है। लेकिन मुझे यह पसंद नहीं है। यह बहुत अधिक शैलियों है और यह अच्छा नहीं लग रहा है।
किसी भी सलाह की सराहना की जाएगी।
संभव मार्गदर्शन: http://stackoverflow.com/a/39645224/3597276 –
संभव समाधान: http://stackoverflow.com/q/39079773/3597276 –
बहुत वाह, बहुत फ़ोटोशॉप, इस तरह के रचनात्मक! –