css - 如何在没有（以JS为例）的情况下使矩阵动态调整到父宽度

Question

请参阅此示例（http://jsfiddle.net/cpSbH/2/）并尝试调整窗口大小以了解我的意思 - 它正在调整边距以在一行上获得尽可能多的项目，同时也充分利用空间并避免一侧的间隙（或两者如果它会居中）。

没有javascript就可以实现吗？

谢谢

我写的代码：

HTML：

<div id="wrapper">
 <div class="item">item</div>
 ...
 <div class="item">item</div>
</div>

JS：

$(window).resize(function(){
  var minMargin = 10;
  var width = $("#wrapper").innerWidth();
  var itemWidth = $('.item').outerWidth()+minMargin+minMargin

  var count = Math.floor(width/itemWidth)
  var space = width - (count*itemWidth);
  var margin = (space/(count));

  if(margin < minMargin) margin = minMargin;

  margin = Math.floor(margin/2);
  $('.item').css({'margin-left':margin,'margin-right':margin}); 
});

Answer 1

使用 flexbox 模型，您只需使用 CSS 即可实现所需的行为。主要问题将是浏览器兼容性。
你的 CSS 可能看起来像这样：

#wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /*or space-between*/
}
.item {
    flex: 1;
}

在这个答案中，您有一些链接可以了解有关弹性模型的更多信息。