.app-card-content{display:flex;弹性方向：行；弹性包装：包装；背景色：#fff；.app-card-content_item{/*宽度：25%；*/高度：200upx；显示：弹性；对齐项目：居中；证明内容：居中；弹性方向：列；-right{border-right:1upxsolid#F8F8F8;}&.border-bottom{border-bottom:1upxsolid#F8F8F8;}view{margin-bottom:10upx;图片{宽度：50upx；高度：50upx；}如何实现前端九宫格，实现类似下图的九宫格？拿到UI设计图的时候，感觉很简单，就是在一个容器里放几个子项（加上对应的），然后flex布局就解决了。当我写完的时候，我发现不对劲。里面每一项的边框都不符合UI图。仔细看这张图，我们可以发现每个外围子项的边框都不完整，需要单独处理子项才能实现和UI一样。效果下面分析一下每个子项（item）的边框类型：第一种：只需要右边框和底边框（对应上图中的1、2、4、5）第二种：只需要bottomborder（对应上图3、6）第三种：只需要右边框（对应上图7、8）第四种：无边框（对应上图9）有同学会问---咦，为什么没有上边框和左边框呢？因为这个可以用右下边框来模拟。左上边框与右下边框相同。我们这里用右下边框来分类！下面来写判断每个子项的边框样式的方法，需要提前写好class样式，&.border-right{border-right:1upxsolid#F8F8F8;}&.border-bottom{border-bottom:1upxsolid#F8F8F8;}//计算是否需要左右边框getBorderClass(index){//index表示子项的索引值index+=1letclassName=''letlineNumber=this.lineNumber//每个的个数显示的行数lettotal=this.list.length//总行数letline=Math.ceil(total/lineNumber)//总共有多少行letcurrentLine=0//当前在哪一行，这里开始from1letcurrentIndex=0//某行当前是哪个数字currentLine=Math.ceil(index/lineNumber)currentIndex=(index%lineNumber)===0?行号：索引%lineNumber//右下边框if(currentLine<查看：style="'width:'+(100/lineNumber-0.5)+'%'":class="['app-card-content_item',getBorderClass(index)]"v-for="(item,index)在列表中"@click="itemClick(item)":key='index'>{{item.title}}.app-card-content{display:flex;弹性方向：行；弹性包装：包装；背景色：#fff；.app-card-content_item{/*宽度：25%；*/高度：200upx；显示：弹性；对齐项目：居中；证明内容：居中；弹性方向：列；-right{border-right:1upxsolid#F8F8F8;}&.border-bottom{border-bottom:1upxsolid#F8F8F8;}view{margin-bottom:10upx;图片{宽度：50upx；高度：50upx；}因为需求的变化，把代码复制过来，最后改为每行显示四个。最终效果如下。最终效果
