flex布局---某个子元素独占一行

实现方式：

//html部分vue模板语法
 
    

    item.name
    


//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就是设置的值。