CSS 3 Ширина модели Flexbox jQuery

Question

Я пытаюсь выровнять и автоматически устанавливать размер с помощью модели flexbox CSS3.

HTML & & CSS:

<ul id="sect"> 
    <li class="">Section 1</li> 
    <li class="">Section 2</li> 
    <li class="">Section 3</li> 
    <li class="">Section 4</li> 
    <li class="">Section 5</li> 
</ul> 

#sect { 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap;  
} 

#sect li { 
    -webkit-flex: auto; 
    flex: auto; 
    display: inline-block; 
    width: 193px; 
    background-color: #e4e4e4; 
    margin-right: 1px; 
    margin-bottom: 1px; 
    height: 35px; 
    line-height: 35px; 
    text-align: center; 
} 

Он работает с Flexbox модели, но только на Google Chrome: jsFiddle exemple

Можно ли воспроизвести это с помощью JavaScript для всех навигаторов (FF/Safari и IE8 +)?

Answer 1

Вот небольшой плагин, который будет делать то же самое с JQuery, она принимает один параметр - минимальную ширину ячейки (например, тот, который вы имеете в CSS)

$.fn.resizeRows = function(minCellWidth) { 
    return this.each(function() { 
     //cache this ul 
     thisul = $(this); 
     //set defaul min cell width 193 
     minCellWidth = minCellWidth|193; 
     //total width of a row in pixels 
     var totalwidth = thisul.width(); 
     //max count of cells that would fit per one row 
     var maxcount = Math.floor(totalwidth/minCellWidth); 
     //number of cells in the end that would require percentage width 
     var endrows = thisul.find('li').length % maxcount;     

     $(this).find('li').each(function(index){ 
      if (index<maxcount||(thisul.find('li').length-index)>=maxcount) 
       $(this).width((totalwidth/maxcount)+'px'); 
      else  
       $(this).width(100/endrows + "%") 
    }) 
}) 
} 

Вы должны вызвать его на начальном этапе и связывания его вдова размер события

$("#sect").resizeRows(193); 
$(window).resize(function(){ 
    $("#sect").resizeRows(193); 
}); 

здесь это модифицированный jsfiddle - я закомментирован гибкое окно в CSS, изменила маржинальную-право на 0, так что ширина может быть рассчитана правильно, и множество Li элементы, чтобы быть поплавок: левый