解决flex布局处理最后一行分布不是左对齐的问题

最新推荐文章于 2024-06-12 16:48:27 发布

原创最新推荐文章于 2024-06-12 16:48:27 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

博客指出使用flex布局处理问题不方便且不符合动态分配原理，建议采用grid来解决，且改动不多，还提及代码只需几句。

我的答案是不用flex，flex布局处理这个有多种方法，但是都不方便且不符合动态分配原理。
我们可以采用grid来解决这个问题，改动也不多。
代码就几句，如下：

  display: grid;
  justify-content: space-between;
  // 根据子元素的盒子的份额自动计算可以平铺几次 285px为每个item的宽度 这里看你自己定义的宽度是多少
  grid-template-columns: repeat(auto-fill,285px);
   // grid-gap 是 row-gap 和 column-gap 的简写形式。
  grid-gap: 0;