微信小程序 Flex布局详解


Posted in Javascript onOctober 09, 2016

微信小程序页面布局方式采用的是Flex布局。

  1. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。
  2. Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。
  3. Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

微信小程序 Flex布局详解

flex布局

Flex布局的特点:

  1. 任意方向的伸缩,向左,向右,向下,向上
  2. 在样式层可以调换和重排顺序
  3. 主轴和侧轴方便配置
  4. 子元素的空间拉伸和填充
  5. 沿着容器对齐

微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用。

伸缩容器

设有display:flex或者display:block的元素就是一个flex container(伸缩容器),里面的子元素称为flex item(伸缩项目),flex container中子元素都是使用Flex布局排版。

display:block 指定为块内容器模式,总是使用新行开始显示,微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

display:flex:指定为行内容器模式,在一行内显示子元素,可以使用flex-wrap属性指定其是否换行,flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
使用display:block(默认值)的代码:

<view class="flex-row" style="display: block;">
   <view class="flex-view-item">1</view>
   <view class="flex-view-item">2</view>
   <view class="flex-view-item">3</view>
 </view>

显示效果:

微信小程序 Flex布局详解

block

改换成display:flex的显示效果:

微信小程序 Flex布局详解

flex

可以从效果图看到block和flex的区别,子元素view是在换行显示(block)还是行内显示(flex)。

主轴和侧轴

Flex布局的伸缩容器可以使用任何方向进行布局。

容器默认有两个轴:主轴(main axis)和侧轴(cross axis)。

主轴的开始位置为主轴起点(main start),主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。

同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。详情见下图:

微信小程序 Flex布局详解

Flex-direction

注意,主轴并不是一定是从左到右的,同理侧轴也不一定是从上到下,主轴的方向使用flex-direction属性控制,它有4个可选值:

  1. row :从左到右的水平方向为主轴
  2. row-reverse:从右到左的水平方向为主轴
  3. column:从上到下的垂直方向为主轴
  4. column-reverse从下到上的垂直方向为主轴

如果水平方向为主轴,那个垂直方向就是侧轴,反之亦然。

四种主轴方向设置的效果图:

微信小程序 Flex布局详解

示例图

图中的实例展示了使用了不同的flex-direction值排列方向的区别。

实例代码:

<view >
  <view class="flex-row" style="display: flex;flex-direction: row;">
    <view class="flex-view-item">1</view>
    <view class="flex-view-item">2</view>
    <view class="flex-view-item">3</view>
  </view>
  <view class="flex-column" style="display:flex;flex-direction: column;" >
    <view class="flex-view-item">c1</view>
    <view class="flex-view-item">c2</view>
    <view class="flex-view-item">c3</view>
  </view>
</view>

运行效果:

微信小程序 Flex布局详解

flex-direction

对齐方式

子元素有两种对齐方式:

justify-conent 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式

justify-content有5个可选的对齐方式:

  1. flex-start 主轴起点对齐(默认值)
  2. flex-end 主轴结束点对齐
  3. center 在主轴中居中对齐
  4. space-between 两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
  5. space-around 每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同。
  6. justify-content的对齐方式和主轴的方向有关,下图以flex-direction为row,主轴方式是从左到右,描述jstify-content5个值的显示效果:

微信小程序 Flex布局详解

justify-content

align-items表示侧轴上的对齐方式:

  1. stretch 填充整个容器(默认值)
  2. flex-start 侧轴的起点对齐
  3. flex-end 侧轴的终点对齐
  4. center 在侧轴中居中对齐
  5. baseline 以子元素的第一行文字对齐

align-tiems设置的对齐方式,和侧轴的方向有关,下图以flex-direction为row,侧轴方向是从上到下,描述align-items的5个值显示效果:

微信小程序 Flex布局详解

aign-items

有了主轴和侧轴的方向再加上设置他们的对齐方式,就可以实现大部分的页面布局了。

源代码地址:https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
js实现省级联动(数据结构优化)
Jul 17 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 #Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 #Javascript
JS中this上下文对象使用方式
Oct 09 #Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 #Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 #Javascript
BootStrap中Table分页插件使用详解
Oct 09 #Javascript
微信小程序 for 循环详解
Oct 09 #Javascript
You might like
cmd下运行php脚本
2008/11/25 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
asp批量修改记录的代码
2008/06/25 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
jQuery.each使用详解
2015/07/07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python调用java的Webservice示例
2014/03/10 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python正则表达式的使用
2017/06/12 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python openpyxl使用方法详解
2019/07/18 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
研究生自荐信
2013/10/09 职场文书
装修五一活动策划案
2014/01/23 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL