实现方式：

//html部分vue模板语法
<div class="flex-box"> 
    <div 
    v-for="(item,index) in list" 
    :class="{'flex-item':true;'title':item.code === 'name'}">
    item.name
    </div>
</div>

//css部分

.flex-box{
    display:flex;
    flex-wrap:wrap;
    align-item:center;
    width:100%;
}
.flex-item{
    width:30%;
}
.title{
    flex-basis:100%;
}

实现效果：

 总结：

flex-wrap：这个属性规定flex是单行还是多行排列

flex-basis：用于设置元素占据主轴的空间即width，如果width和flex-basis同时设置，即width会被覆盖掉，如果设置auto元素占据的主轴大小就是元素实际的大小，相当于width:auto，如果设定了固定值则元素的width就是设置的值。