CSS布局-解决flex布局下多行元素既可以均匀对齐最后一行也可以从左到右排列

首先，你有没有遇到过这种情况

你既想让它均匀分布，还想让最后一行从左向右排列

此时你的代码应该是这样的

 .box {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .box-info {
      position: relative;
      width: 153px;
      height: 140px;
      }
  }

解决办法

.box {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 153px);
    grid-gap: 10px;
    .box-info {
      position: relative;
      width: 153px;
      height: 140px;
    }
 }

//针对子盒子自适应宽度可这样写
.box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
    grid-gap: 10px;
    .box-info {
      position: relative;
      min-width: 200px;
      height: 140px;
    }
 }

再来看一下效果

接下来看一下flex和grid布局的区别

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。(不过存在兼容性问题，使用之前应看具体需求)