Come non forzare l'ultima linea in un contenitore flessibile con elementi di allineamento: allungare

Question

Ho un contenitore flessibile con flex-wrap: wrap e align-items: stretch in modo che i bambini vengano allungati quando il contenitore viene ridimensionato fino a quando il bambino successivo non si adatta.

Il problema è in genere l'ultima riga ha meno elementi rispetto alle righe precedenti e i bambini vengono stirati troppo (tutte le caselle dovrebbero apparire uguali in ogni situazione). Come posso impedirlo se non creare un sacco di scatole vuote alla fine del container?

Il codice completo è qui: http://jsfiddle.net/m_gol/B3wLG/2/

E 'fondamentalmente:

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

dove body contiene una serie di elementi con una classe child.

Answer 1

Penso che dovresti avere noi JS per verificare se la larghezza dell'ultimo qty N elementi figlio corrisponde alla larghezza del primo elemento. Per ogni elemento che non corrisponde, unflex it (flex: none), quindi impostare la sua larghezza in modo che corrisponda alla larghezza del primo elemento.

Ho messo insieme un piccolo script per questo. Sfortunatamente, devi aggiungere la classe smoothFlex al genitore affinché funzioni; oppure puoi usare qualche altro selettore.

Non conosco un modo veloce per selezionare tutti gli elementi con uno stile display: flex.

In caso contrario, il seguente script funziona esattamente come previsto.

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, lo standard FlexBox dovrebbe avere un'opzione nativa per questo - dovrebbe essere di default se il genitore è avvolto.

Fonti:

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

Answer 2

L'unica soluzione che ho trovato per questo finora è di aggiungere programatically alcuni elementi figlio vuoti per costituire una riga completa: va bene aggiungere più della riga in modo da farla fuoriuscire (dato che sono vuoti).

Answer 3

Il modo più semplice morti è quello di rimuovere la flessione dall'ultimo elemento:

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

o dare una piccola frazione di crescita, in modo che non sembra troppo poco sia (soprattutto se tutto il resto è cresciuta un po ')

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

Se nessuno di questi lavori, aggiungere un div vuoto come ultimo punto, e dargli una crescita molto più grande - anche nascondere eventuali bordi e sfondi, e dargli un'altezza pari a zero in modo che doesn' t prendere un'altra linea

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