CSS3，FLEX布局，怎么实现1行3个元素，多行显示

最近写Vue项目，遇到了一个问题，如下图

 

 右边显示是这样子，但是我想要的效果是这样：

 

我就要用flex布局实现~

有几个flex的属性咱们要知道，

flex-wrap：换行方式。（nowwrap：默认值，单行，可能溢出； wrap：如果超过一行，就换行）

justify-content: space-between;  (均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 )

然后来实现：

其实很简单：.num是父元素，.el-card是子元素，这里用了less样式

.num{
  .el-card{
    width:33%;
  }
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  
}

最后效果表现为：

 

 细节再调整~