javascript - 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 模型，但仅适用于 Google Chrome: jsFiddle exemple

是否可以为所有导航器(FF/Safari 和 IE8+)使用 javascript 重现此内容？

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 + "%")
    })
})
}

您需要先调用它并将其绑定(bind)到 widow resize 事件

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

这里修改了jsfiddle - 我在css中注释掉了flex box，将margin-right改为0，以便正确计算宽度，并将li元素设置为float:left