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

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

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

解决Flex布局设置换行后最后一个元素不对齐_第1张图片

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

解决Flex布局设置换行后最后一个元素不对齐_第2张图片

附上代码

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

 

你可能感兴趣的:(前端,css,html)