html - 行为之间的 Flexbox 空间与换行相结合

Question

<分区>

Answer 1

这很烦人，但你不能为此使用 flexbox。

更好的方法是改用 CSS 网格，然后应用

/* for space-around style */
.fixed-grid--around{
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  justify-items: center;
}
/* for space-between style*/
.fixed-grid--between{
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: space-between;
}
/* both should run fixed width elements equal to the declared in the container */ 
.grid-element{
  width: 150px;
}

通过将网格列的最小宽度设置为它们的元素宽度，将最大列宽设置为 1 fr，我们可以让它们均匀分布周围的空间。对于 space-between 样式，autofit 和 space-between 可以解决问题。

所以它添加列来填充容器，均匀分布它们之间的空间，直到可以添加另一列，并根据需要换行。正是我们一直希望 Flexbox 能做到的。

我在探索问题之前做的笔:

https://codepen.io/facundocorradini/pen/XVMLEq

如果您要使用它，请确保为不支持网格的浏览器添加一些回退。可能是 float 、内联 block 、 flex 或其他任何东西。 CSS 网格是 really good at overriding the fallbacks ，所以申请起来相当容易。