css - CSS3 弹性盒属性

Question

我想在我们动态创建盒子的布局中使用弹性盒子属性。

所以我想根据计数调整自己（框）。就像只有 1 个盒子一样，它应该占用 100% 的空间，最多 3 个盒子会排成一排。如果屏幕中出现第 4 个框，则自动转到下一行。

我搜索了很多关于 flex-flow 的内容，但没有找到正确的解决方案。

请帮忙。

问候

Answer 1

目前仅使用新语法，Chrome（需要前缀）和 Opera：

#container {
    display: flex;
    flex-flow: row wrap;
}

#container > * {
    flex: 1 1 33%;
}

这是一个演示：http: //jsfiddle.net/lpd_/qwwT8/。如果您不希望在填充第一行后后续行上的项目拉伸，您可以添加：

#container > *:nth-child(n+4) {
    max-width: 33.33%;
    max-width: calc(100% / 3); /* To override and be more precise, if you wish */
}