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

微信小程序自己开发了一套 wxml + wxss，对许多 HTML 标签和 CSS 属性不支持。

不支持 table 标签，推荐使用 flex 布局。

自然而然的想法：flex 嵌套，效果还不错，贴代码如下：

1. <view id="panel" class="flex-column">
2. <view class="flex-cell flex-row">
3. <text class="flex-cell flex-row">1</text>
4. <text class="flex-cell flex-row">2</text>
5. <text class="flex-cell flex-row">3</text>
6. <text class="flex-cell flex-row">4</text>
7. </view>
8. <view class="flex-row flex-cell">
9. <text class="flex-cell flex-row">1</text>
10. <text class="flex-cell flex-row">2</text>
11. <text class="flex-cell flex-row">3</text>
12. <text class="flex-cell flex-row">4</text>
13. </view>
14. <view class="flex-row flex-cell">
15. <text class="flex-cell flex-row">1</text>
16. <text class="flex-cell flex-row">2</text>
17. <text class="flex-cell flex-row">3</text>
18. <text class="flex-cell flex-row">4</text>
19. </view>
20. <view class="flex-row flex-cell">
21. <text class="flex-cell flex-row">1</text>
22. <text class="flex-cell flex-row">2</text>
23. <text class="flex-cell flex-row">3</text>
24. <text class="flex-cell flex-row">4</text>
25. </view>
26. <view class="flex-row flex-cell">
27. <text class="flex-cell flex-row">1</text>
28. <text class="flex-cell flex-row">2</text>
29. <text class="flex-cell flex-row">3</text>
30. <text class="flex-cell flex-row">4</text>
31. </view>
32.  
33. </view>

1. #panel{
2. height:65vh;
3. background:#fff;
4. }
5.  
6. #panel text{
7. line-height: 13vh;
8. border-right: 1rpx solid #ddd;
9. border-bottom: 1rpx solid #ddd;
10. }
11.  
12. .flex-row{
13. display: flex;
14. flex-direction: row;
15. justify-content: center;
16. align-items: center;
17. }
18. .flex-column{
19. display: flex;
20. flex-direction: column;
21. justify-content: center;
22. align-items: stretch;
23. }
24.  
25. .flex-cell{
26. flex: 1;
27. }