2017-01-03 19 views
6

मुझे फ्लेक्स के साथ समस्या है।कई आकारों के साथ सीएसएस फ्लेक्स गतिशील ग्रिड

मैं एक आवरण जहां 9 वर्गों के 1 के एक न्यूनतम और अधिकतम दिखाया जा सकता है है। ग्रिड में वर्गों की संख्या के आधार पर वर्गों में कई आकार हो सकते हैं। मैं सभी आवश्यक एक को छोड़कर काम कर मामलों मिल गया है, इस तस्वीर के रूप में देखा: enter image description here

मेरे शैलियों रहे हैं:

.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 के लिए मूल्य संयोजन का एक बहुत कोशिश की है लेकिन कुछ भी काम किया है।

मैं, वर्गों और स्थिति पूर्ण समाधान के टन करने के लिए वापस जाना होगा अगर वहाँ इस के लिए कोई फ्लेक्स समाधान है। लेकिन मुझे यह पसंद नहीं है। यह बहुत अधिक शैलियों है और यह अच्छा नहीं लग रहा है।

किसी भी सलाह की सराहना की जाएगी।

+0

संभव मार्गदर्शन: http://stackoverflow.com/a/39645224/3597276 –

+0

संभव समाधान: http://stackoverflow.com/q/39079773/3597276 –

+1

बहुत वाह, बहुत फ़ोटोशॉप, इस तरह के रचनात्मक! –

उत्तर

3

मुझे लगता है कि नाव आप के लिए एक बेहतर विकल्प है, यह स्निपेट की जाँच:

.grid { 
 
    width: 300px; 
 
} 
 

 
.box { 
 
    background: orange; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
    float: left; 
 
} 
 

 
.wide { 
 
    width: 190px; 
 
} 
 

 
.tall { 
 
    height: 190px; 
 
} 
 

 
.empty { 
 
    background: transparent 
 
} 
 

 

 
/* you can ignore everything after this comment - it's all for illustration */ 
 
body { 
 
    background: #334; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
.example { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    border: 1px solid #445; 
 
    padding: 10px; 
 

 
    width: 300px; 
 
} 
 

 
h3 { 
 
    margin: 0 0 5px 0; 
 
}
<div class="example"> 
 
    <h3>Example 1</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box tall empty"></div> 
 
    <div class="box wide empty"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 2</h3> 
 
    <div class="grid"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 4</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

फ्लेक्स अभी भी तत्वों की पूरी पंक्तियों बनाने की कोशिश कर रहा है, इसलिए अपने बड़े वर्ग और अपने छोटे वर्ग एक पंक्ति का हिस्सा हैं; इससे परे ढेर करने के लिए कोई समर्थन नहीं है। दूसरी ओर

फ्लोट जहाँ भी यह उन्हें फिट कर सकते हैं तत्वों सामान के लिए कोशिश करता है।

संपादित

मैं कैसे ऊपर छवियों के सबसे पुन: पेश करने पर उदाहरण के साथ इस उत्तर (मैं उद्देश्यपूर्ण बाहर छोड़ दिया गया है 2 2 उदाहरण के द्वारा अद्यतन किया है - के साथ जवाब बादल नहीं करना चाहता था 1.5 ऊंचाई/चौड़ाई के बक्से के लिए कक्षाएं)। ब्लॉक, साथ ही वर्गों tall और wide से रंग निकालने के लिए

एक empty वर्ग के

उपयोग सभी आकार के धब्बे को भरने के लिए आप अपने लेआउट अनुकूलित लेकिन आपको योग्य मदद करनी चाहिए। एक नोट - यहां empty पृष्ठभूमि रंग को transparent पर सेट करता है। आपकी कक्षा इससे कम या कम कर सकती है। आपको कक्षा की आवश्यकता भी नहीं हो सकती है यदि यह सब सामग्री के बिना एक div है।

+0

धन्यवाद लेकिन इस मामले में मुझे कई मामलों में माइक्रोमैनेज करना होगा। मेरे मामले में, यह हमेशा एक दूसरे के बाद उन्हें ढेर करने के बारे में नहीं है। – Laker

+0

@Laker क्या आप उस पर विस्तार कर सकते हैं? उस फ्लोट के लिए फ्लेक्स अच्छी तरह से काम करता है कौन सा मामला नहीं है? –

+0

मैंने इसके बारे में सोचा और केवल दो उदाहरण हैं, एक मेरे मूल प्रश्न में चित्र में है, पहला उदाहरण। दूसरा उदाहरण होगा जहां बड़े वर्ग के दाईं ओर 3 वर्ग (एक बड़ा, दो छोटा) एक बड़ा वर्ग होगा, दूसरा बड़ा वर्ग होगा। लेकिन अगर यह केवल दो मामले हैं (मैंने सोचा कि यह और अधिक होगा) तो यह ठीक है और ठीक है। लेकिन मुझे फ्लोट पसंद नहीं है: पी आपकी व्याख्या के बारे में आपकी व्याख्या क्यों नहीं हुई है, वास्तव में मुझे इसे "हैक" के साथ काम करने में मदद मिल सकती है। मैं पहले कोशिश करूँगा। – Laker

0

इस लेआउट को एक कंटेनर में फ्लेक्स के साथ संभालने का कोई तरीका नहीं है।

आपको इसे प्राप्त करने के लिए एक छोटी सी चाल करने की आवश्यकता है।

आसान एक फ्लेक्स लेआउट से बाहर तीसरे आइटम लेने के लिए, यह स्थिति पूर्ण होगा:

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0px; 
 
    border: transparent solid 5px; 
 
    box-sizing: border-box; 
 
    background-clip: content-box; 
 
} 
 

 
.item:first-child { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.item:nth-child(2) { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 100px; 
 
    right: 0px; 
 
}
<div class="grid"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div>

एक और posibility, फ्लेक्स विचार में अधिक हो सकता है, लेकिन यह भी मुश्किल

बड़े तत्व को मार्जिन-निचले नकारात्मक के साथ सेट करें, जिससे यह केवल 1 पंक्ति (छोटे बक्से के आकार की पंक्ति की ऊंचाई होने पर) पर कब्जा कर लेता है।

अब 3 पंक्तियों के साथ एक लेआउट हो। समस्या यह होगी कि तीसरा बॉक्स पहले, बड़े बॉक्स के नीचे होगा। इसे हल करने के लिए, हम एक छद्म तत्व स्थापित कर रहे हैं (मैंने स्निपेट को इसे दृश्यमान बनाने के लिए स्टाइल किया है, उत्पादन में इसे केवल ऊंचाई 0 पर सेट करें और यह गायब हो जाएगा) पहले तत्व की चौड़ाई और मार्जिन के समान गुणों के साथ।

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    order: 3; 
 
    background-color: red; 
 
    width: 190px; 
 
    height: 10px; 
 
    margin: 5px; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
} 
 

 
.item:first-child { 
 
    width: 190px; 
 
    height: 190px; 
 
    margin-bottom: -100px; 
 
    order: 1; 
 
    opacity: 0.5; 
 
} 
 

 
.item:nth-child(2) { 
 
    order: 2; 
 
} 
 

 
.item:nth-child(n+3) { 
 
    order: 4; 
 
}
<div class="grid"> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
</div>

संबंधित मुद्दे