flex布局+v-for循环，布局属性无效问题

问题：flex布局 循环的view组件，时flex布局属性无效

问题代码：

 效果图：（未按照flex布局默认flex-direction横向排列）

 

经过调试发现：flex布局要写在循环的外面！！

        因为v-for循环的是v-for本身所在的组件，而flex布局控制的是flex容器的子元素，也就是上图中内部的div。

        我们可以在循环内部在添加一个元素，查看效果图，可以发现，循环内部的两个div元素呈横向分布，也就是flex布局作用到了循环内部。

 

        正确写法：flex布局v-for循环出来的组件（注意理解这句话）

<div style="display: flex">
	 <div v-for="item in colors" :style="'background-color:'+item.color"></div>
</div>

 效果图

总结一下，v-for循环的是v-for本身所在的组件，而flex布局控制的是flex容器的子元素，要控制好循环与布局之间的内外关系，需要理解好红字内容。