循环拿出后台数据，每排显示三个图片，支持自适应

1、后台拿数据我遇到的问题是，一个for循环里放了三个div，然后每个div显示一个item。错了，这样拿出的数据是一行显示了三个。完了呢，数据是重复的。后来我改了，改成一个div，然后不用item了。用数组[index]取值。

html结构如下：假设我都设置好了变量data就是后台返回给我要我显示的数据

        <div class="children" v-for="(item,index) in data">
            <img :src="data[index].url">
        </div>
   </div>

这样我把后台显示的数据就取出来了，下面说一下一排显示三个，无论浏览器窗口在小怎么设整。一排都显示三个样式

.parent {
 display: flex;
 // 显示不下换行
 flex-wrap:wrap;
 // 我的项目里要展示的图片么，一行展示三个。我用的行对齐是两端对齐
 justify-content: space-between;
 .children {
     // 这个设置一个属于性，相当于你设置了三个属性
     // 1、 flex-grow:1  子元素在父元素中增大的比例
     // 2、 flex-shrink:1 子元素在父元素变小后，缩小的比例
     // 3、 flex-basis:0% 子元素的宽度都被改为了0.设置了宽度也会被这个覆盖。
     flex: 1;
     box-sizing: border-box;
     // 这里你除几，一行就显示几个。可以根据你的需要来
     width: calc((100% - 40px) / 3);
     // 这里的40px = （分布的个数我的是3-1）*间隙20px
     min-width: calc((100% - 40px) / 3)
     max-width: calc((100% - 40px) / 3)
     margin: 0 20px 20px 0; // 间隙20px
     padding: 10px;
     text-align: center;
     border: 1px solid #888
     
 }
}

完成了，这个也是在网上查的，我自己又整理成我理解的。方便我好理解。 有错误还请大佬指教。 当自己的笔记了。