CSS 3 Flexbox模型寬度jQuery

Question

我試圖對齊和自動調整大小框與CSS3 flexbox模型。

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的模式工作，但只在谷歌瀏覽器： 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元素是浮動：左