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%;
  
}

最后效果表現為：

 

 細節再調整~