换行后均匀分布

 

我想实现换行之后能够平均布局，试了很多方法，你们都可以试试，没准我不行的你们可以。

法一：这个主要是看看什么是 justify-content: space-evenly;

css代码

container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
       //justify-content: space-evenly;
      &:before,
      &:after {
          content: '';
          display: block;
    }
}

法二：我试完还是有点问题

css代码

父元素 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      &::after {
        content: "";
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
      }
}

法三：网格布局，这个应该可以，但是我的电脑出来不知道为什么就是不行，同一份代码

css代码

父元素 {
        display: grid;
        grid-template-columns: repeat(auto-fill,  240px);
}

法四：

采用elementUI布局

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

这个我主要是把父元素div改成el-row，其他的自己再调一调，我用的是这个布局