解决Flex布局设置换行后最后一个元素不对齐

啊啾同学

于 2023-09-20 09:28:42 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 css html

博客指出使用flex布局设置超出换行时会遇到问题，为解决该问题，推荐使用grid布局，并附上相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当使用flex布局时经常会有一个问题困扰我，当使用以下代码设置超出换行的时候会出现这种情况。

{
   display:flex;
   justify-content:space-between;
   flex-wrap:warp;
}

如果想变成👇这种效果，可以使用grid布局

附上代码

{
  display:grid;
  grid-template-columns:repeat(auto-fill,160px);
  grid-gap:0 15px; //元素之间的距离 相当于margin的效果
}