網站建設 - 建站教程 - 微信小程序 - 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：哪些做法會讓你的網站降權?