微信小程序 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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
Vue.js学习示例分享
Feb 05 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php微信公众平台开发类实例
2015/04/01 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
js 省地市级联选择
2010/02/07 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JSON相关知识汇总
2015/07/03 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
js实现跟随鼠标移动的小球
2019/08/26 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Scrapy框架使用的基本知识
2018/10/21 Python
python实现梯度法 python最速下降法
2020/03/24 Python
如何理解python中数字列表
2020/05/29 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
护理专业毕业生自荐信
2014/06/15 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
综合管理员岗位职责
2015/02/11 职场文书
趣味运动会口号
2015/12/24 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android