Flex实现表格布局（⼩程序）⼩程序⾃⼰开发了⼀套 wxml + wxss，对许多 HTML 标签和 CSS 属性不⽀持。
不⽀持 table 标签，推荐使⽤ flex 布局。
⾃然⽽然的想法：flex 嵌套，效果还不错，贴代码如下：
<view id="panel" class="flex-column">
<view class="flex-cell flex-row">
html的flex布局<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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。