码迷,mamicode.com
首页 > 微信 > 详细

Flex 实现表格布局 (微信小程序)

时间:2017-08-17 14:27:34      阅读:849      评论:0      收藏:0      [点我收藏+]

标签:border   dir   play   效果   pre   text   标签   代码   wxs   

微信小程序自己开发了一套 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;
}

技术分享

Flex 实现表格布局 (微信小程序)

标签:border   dir   play   效果   pre   text   标签   代码   wxs   

原文地址:http://www.cnblogs.com/ppJuan/p/7380798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!