微信小程序 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面向对象编程
Nov 15 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 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
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python常用特殊方法实例总结
2019/03/22 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
给医院的感谢信
2015/01/21 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle