संरेखण के साथ एक फ्लेक्स कंटेनर में अंतिम पंक्ति को ओवरस्ट्रेच नहीं करें:

Question

मेरे पास flex-wrap: wrap और align-items: stretch के साथ एक फ्लेक्स कंटेनर है ताकि बच्चों को तब तक बढ़ाया जा सके जब कंटेनर का आकार अगले बच्चे तक फिट हो जाए।

समस्या आमतौर पर पिछली पंक्ति में पिछली रेखाओं की तुलना में कम तत्व होते हैं और बच्चे बहुत अधिक फैले होते हैं (सभी बक्से हर स्थिति में समान दिखते हैं)। कंटेनर के अंत में खाली बक्से का गुच्छा बनाने के अलावा मैं उसे कैसे रोक सकता हूं?

पूर्ण कोड यहाँ है: http://jsfiddle.net/m_gol/B3wLG/2/

यह मूल रूप से बताया गया है:

body { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
} 
.child { 
    height: 50px; 
    margin: 10px; 
    -webkit-flex: 1 1 50px; 
    flex: 1 1 50px; 
    background-color: red; 
    border: 1px solid black; 
} 

जहां body एक वर्ग child साथ तत्वों का एक समूह होता है।

Answer 1

मुझे लगता है कि आपको यह जांचने के लिए जेएस होना होगा कि अंतिम qty एन बाल तत्वों की चौड़ाई पहले तत्व की चौड़ाई से मेल खाती है या नहीं। प्रत्येक तत्व के लिए जो मेल नहीं खाता है, इसे निष्क्रिय करें (flex: none), फिर पहले तत्व की चौड़ाई से मेल खाने के लिए इसकी चौड़ाई सेट करें।

मैंने इसके लिए एक छोटी सी लिपि रखी। दुर्भाग्यवश, आपको इसे काम करने के लिए माता-पिता को smoothFlex कक्षा जोड़नी होगी; या आप किसी अन्य चयनकर्ता का उपयोग कर सकते हैं।

मुझे शैली display: flex शैली के साथ सभी तत्वों का चयन करने का एक तेज़ तरीका नहीं पता है।

अन्यथा, निम्न स्क्रिप्ट ठीक वैसे ही काम करती है जैसा मैं अपेक्षा करता हूं।

var RESIZE_DELAY = 120, 
    FLEX_SELECTOR_STRING = '.smoothFlex', 
    resizeTimeout = undefined; 
$(window).on('resize.smoothFlex',function(){ 
    clearTimeout(resizeTimeout); 
    resizeTimeout = setTimeout(function(){ 
     $(FLEX_SELECTOR_STRING).each(function(){ 
      var firstChildW = Math.floor($(this).children().first().width()); 
      $($(this).children(':gt(0)').get().reverse()).each(function(){ 
       if($(this).width()==firstChildW) return false; 
       else $(this).css({ 
        flex : "none", 
        width : firstChildW + "px", 
       }); 
      }) 
     }); 
    }, RESIZE_DELAY); 
}); 

IMO, flexbox मानक इस के लिए एक देशी विकल्प होना चाहिए - अगर माता-पिता लपेटा जाता है डिफ़ॉल्ट होना चाहिए।

सूत्रों का कहना है:

• JQuery .each() backwards
• http://www.w3schools.com/jquery/sel_gt.asp
• How to break/exit from a each() function in JQuery?

Answer 2

एकमात्र समाधान मैं इस पाया है अब तक प्रोग्राम के एक बनाने के लिए कुछ खाली बच्चे तत्वों को जोड़ने के लिए है पूरी पंक्ति - पंक्ति से अधिक जोड़ना ठीक है ताकि वे ओवरपिल (जैसे वे खाली हों)।

Answer 3

मृत सबसे आसान तरीका है पिछले आइटम से फ्लेक्स दूर करने के लिए है:

.flex-item:last-child{ 
    flex-grow: 0; 
} 

या यह विकास का एक छोटा सा अंश देते हैं, तो यह बहुत कम नहीं लगती है या तो (विशेष रूप से अगर सब कुछ हो गया है एक छोटे से)

.flex-item:last-child{ 
    flex-grow: 0.1; 
} 

यदि इन काम के न, अपने पिछले आइटम के रूप में एक खाली div जोड़ने के लिए, और यह एक बहुत बड़ा विकास देना - किसी भी सीमाओं और पृष्ठभूमि छुपाने के लिए, और यह एक शून्य ऊंचाई दे तो यह 'नहीं करता है टी एक और लाइन

ले लो

.flex-item:last-child{ 
    background: none; 
    border: none; 
    height: 0px; 
    flex-grow: 100; 
}