Flexbox 填充行并确定每行的子项数

Question

我在一个容器里有一堆盒子。我不知道一排可以放多少个盒子，屏幕越大，盒子应该越多。但是我希望每一行都被完全填满，并调整框的大小（在 100px 到 150px 之间）以确保每一行都被填满。

http://jsfiddle.net/ssxu5moy/11/

.container2 {
    width:100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
}

.box {
    border: 1px solid purple;
    background: blue;
    align-self: stretch;
    min-width: 100px;
    max-width: 150px;
}

<div class="container2">
    <div class="box box1">
    </div>
    <div class="box box2">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
    <div class="box box3">
    </div>
</div>

我已经在 javascript 中做到了这一点，它工作正常，但我想改为更简单的 flexbox，但我很难让它工作。这在 flexbox 中是否可行？

Answer 1

是的！你可以这样做。 max-width 使盒子停在 150px 这似乎不是您想要的，因为您希望每个盒子在换行后填充行中的剩余空间吗？

这是一个更新的小提琴： http://jsfiddle.net/disinfor/ssxu5moy/12/

我在你的 CSS 中唯一改变的是 min-width 和 max-width 到 flex 属性：

CSS：

.box {
    border: 1px solid purple;
    background: blue;
    align-self: stretch;
    flex:1 0 100px;
}

如果我理解您的问题，这应该就是您要找的。 警告： flex 属性需要浏览器前缀。

编辑：这里有一些关于 flex 属性简写的简单读物： https://css-tricks.com/almanac/properties/f/flex/

如果链接消失： 这是 flex-grow、flex-shrink 和 flex-basis（分别）的简写。