利用flex布局实现仿微信群的多头像九宫格自适应布局

利用flex布局实现微信群的多头像自适应布局

微信群聊的头像是多个成员的组合，例如下图。

可以看到根据单个小头像的大小可以分为三类，分别可以看做是整个大头像的98%，47%和31%。所以可以根据单个数组的长度，分别匹配不同的样式。而为了模拟后台返回的多头像接口，需要额外做一个判断，即最多只能显示9张头像。

<div id="app">
    <div class="avatar" v-for="(avatarItem,index) in avatarList">
        <image v-for="(item,index) in avatarItem"