Flex实现表格布局（微信小程序）

网站建设 - 建站教程 - 微信小程序 - flex 实现表格布局 （微信小程序）
微信小程序自己开发了一套 wxml + wxss，对许多 html 标签和 css 属性不支持。
不支持 table 标签，推荐使用 flex 布局。
自然而然的想法：flex 嵌套，效果还不错，贴代码如下：
<view id="panel" class="flex-column">
<view class="flex-cell flex-row">
<text class="flex-cell flex-row">1</text>
<text class="flex-cell flex-row">2</text>
<text class="flex-cell flex-row">3</text>
<text class="flex-cell flex-row">4</text>
</view>
<view class="flex-row flex-cell">
<text class="flex-cell flex-row">1</text>
<text class="flex-cell flex-row">2</text>
<text class="flex-cell flex-row">3</text>
<text class="flex-cell flex-row">4</text>
</view>
<view class="flex-row flex-cell">
<text class="flex-cell flex-row">1</text>
<text class="flex-cell flex-row">2</text>
<text class="flex-cell flex-row">3</text>
<text class="flex-cell flex-row">4</text>
</view>
<view class="flex-row flex-cell">
<text class="flex-cell flex-row">1</text>
<text class="flex-cell flex-row">2</text>
<text class="flex-cell flex-row">3</text>
<text class="flex-cell flex-row">4</text>
</view>
<view class="flex-row flex-cell">
<text class="flex-cell flex-row">1</text>
<text class="flex-cell flex-row">2</text>
<text class="flex-cell flex-row">3</text>
<text class="flex-cell flex-row">4</text>
</view>
</view>
#panel{
height:65vh;
background:#fff;
}
#panel text{
line-height: 13vh;
border-right: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.flex-row{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex-column{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.flex-cell{
flex: 1;
}


为“细节”而设计：让「设计」更精致
企业搭建网站的六大理由
营销型网站建设的3大误区
2023年应注意的三大网络安全新变化
租用美国服务器如何选对配置?这5点要了解
专业的网站优化人员，应该会使用的基本关键词优化工具有哪些？
南昌企业网站制作：制作网站你要了解的几个重要步骤
网站seo：哪些做法会让你的网站降权?