Son çizgiyi hizalama öğeleriyle birlikte esnek bir kapsayıcıda fazla uzatmayın: stretch

Question

flex-wrap: wrap ve align-items: stretch ile esnek bir kapsayıcım var, böylece bir sonraki çocuk sığana kadar kap yeniden boyutlandırıldığında, çocuklar gerilirler.

Sorun, genellikle son satırın önceki satırlardan daha az öğeye sahip olması ve çocukların çok fazla gerilmesi (tüm kutular her durumda aynı görünmelidir) olmasıdır. Konteynerin sonunda bir grup boş kutu oluşturmayı nasıl engelleyebilirim?

tam kod

burada: http://jsfiddle.net/m_gol/B3wLG/2/

Temelde var:

body bir sınıf child ile unsurların bir demet içeren

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; 
} 

.

Answer 1

Son adet N alt öğe öğesinin genişliğinin ilk öğenin genişliğine uyup uymadığını kontrol etmek için JS'ye sahip olmanız gerektiğini düşünüyorum. Eşleşmeyen her bir öğe için, (flex: none) unflex'i seçin ve ardından ilk öğenin genişliğine eşit olacak şekilde genişliğini ayarlayın.

Bunun için küçük bir senaryo hazırladım. Ne yazık ki, çalışmak için ebeveyne smoothFlex sınıfını eklemelisiniz; veya başka bir seçici kullanabilirsiniz.

display: flex stiliyle tüm öğeleri seçmenin hızlı bir yolunu bilmiyorum.

Aksi takdirde, aşağıdaki komut tam olarak beklediğim gibi çalışır.

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 standardı bunun için yerel bir seçeneğe sahip olmalıdır;

Kaynaklar:

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

Answer 2

tek çözüm bu saptadığımız şimdiye kadar programlama yoluyla telafi etmek bazı boş alt öğelerini eklemektir Satırı tamamla - satır boşluğundan daha fazlasını eklemek çok iyidir (boş olduklarından).

Answer 3

ölü kolay yolu son öğeden esnemesi kaldırmaktır:

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

Ya o büyümenin küçük bir bölümünü vermek, bu yüzden her şey büyüdü ya (özellikle çok az görünmüyor) biraz

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

bu işin ne, son öğe olarak boş bir div ekleyin ve bunu çok daha büyük bir büyüme verirsen - Ayrıca herhangi sınırları ve arka gizlemek ve kötü kokan bu yüzden o bir sıfır yükseklik vermek t başka bir satır

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