放大缩小以及布局问题

Question

是这么个需求:

可以动态调整每个 item 的宽度, 过程始终保持每个 item 间距相等, 随着 item宽度增加, 当一行放不下就折行. 随着 item 宽度减小, 当一行可以多放一个就把第二行第一个挪上来, 预期如图

我用 flex 布局设置了 justify-content: space-between 然后效果如图

我有两种方法去修改:

第一是补数据比如缺3个 item 就补3个
第二就是每个 row 在放到一个 div 里面 然后根据情况是否设置 justify-content
但是这两种方式都会要牵涉到 container 和 item 的计算

想知道各位有其他更好的方案吗, 比如纯 css 可以做到?

Answer 1

justy-content:flex-start;然后每个盒子给个固定margin

Answer 2

用浮动不就可以了

Answer 3

css3 calc可以

https://codepen.io/voggen/pen...