Flex 实现表格布局 (微信小程序)
2018-03-01 18:38
621 查看
微信小程序自己开发了一套 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布局怎么实现上中下3行铺满整个窗口。
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
- (三)微信小程序之容器组件view实现水平和纵向布局
- 微信小程序开发--从block盒式布局到Flex弹性布局
- 微信小程序UI------实现携程首页顶部的界面(弹性布局)
- 微信小程序实现横向增长表格的方法
- 微信小程序开发flex布局
- 微信小程序开发之搞懂flex布局4——Main Axis
- 微信小程序前置课程:flex布局(二)
- 微信小程序开发之搞懂flex布局3——Flex Item
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
- 微信小程序布局display flex布局介绍
- 微信小程序之列表布局实现
- 微信小程序中实现瀑布流布局和无限加载
- 微信小程序flex布局
- 微信小程序 View:flex 布局
- 微信小程序UI------实现携程首页顶部的界面(弹性布局)
- 微信小程序开发之搞懂flex布局2——flex container
- 微信小程序入门三之Flex布局
- 微信小程序布局display flex布局介绍