css弹性布局+自动换行

需求背景：

制作一些卡片，然后卡片数量是不固定的，页面每一行最多放4张卡片，其它的自动换行，于是可以使用弹性布局和自动换行实现

<div class="wrapper" style="margin:10px;border-width: 2px;border-style:solid;" >
    < for={ int i=0;i<8;i++>
        <div class="card"> aa</div>
    </for>
</div>

css对容器样式进行调整：

div.wrapper{
    margin:10px;
    border-style: solid;
    display: flex;
    flex-wrap: wrap; //flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
}
div.card{
　　flex:0 0 25% //flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间 https://www.runoob.com/cssref/css3-pr-flex.html
}