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}