浅谈微信小程序flex布局基础


Posted in Javascript onSeptember 10, 2018

1:Flex布局

Flex布局如图1所示

浅谈微信小程序flex布局基础

图1

1.1 Flex容器属性

浅谈微信小程序flex布局基础

1.2 Flex容器内元素属性

浅谈微信小程序flex布局基础

align如果定义会覆写掉容器属性中的justify-content,align-items设置的属性

微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名),

在layout.wxml中加入如下代码:

<view class="container1">

 <view class="item1">
 1
 </view>

<view class="item1">
 2
 </view>

 <view class="item1">
 3
 </view>

 <view class="item1">
 4
 </view>

</view>

在layout.wxss中加入如下代码:

.container1{
  height: 100%;
  width:100%;
  background-color:beige;
}


.item1{
  height:100rpx;
  width:100rpx;
  background-color:cyan;
  border: 1px solid #fff
}

编译运行如图2所示

注:上述代码中在container1容器中加入了4个子元素view(item1),item1的样式文件中设置每个item1的宽高为固定值:100rpx,rpx为与屏幕尺寸相关缩放的单位,不同于固定的px,每个item1的边为1px,实线(soliod),白色(#fff)

浅谈微信小程序flex布局基础

图2

修改.container1如下:(增加display:flex;)编译运行如图3所示:可以看出flex布局为默认横向排列元素

.container1{
  height: 100%;
  width:100%;
  background-color:beige;
  display:flex;
}

浅谈微信小程序flex布局基础

图3

1.1.1 容器属性: flex-direction

在.container1增加如下代码:表示设置flex布局纵向排列元素(从左到右为交叉轴,从上到下为主轴),如图2所示。(row:flex布局横向排列元素---从左到右为主轴,从上到下为交叉轴)

 flex-direction:column

1.1.2 容器属性: flex-wrap

在.container1增加如下代码:同时在layout.wxml中复制元素代码到8个元素view,编译运行,效果如图4所示,可以看出本来高宽为100rpx,正方形的view已经变形为长方形。

flex-wrap:nowrap

浅谈微信小程序flex布局基础

图4

如果修改为如下代码:编译运行如图5所示:保证每个子view都是正方形,然后放不下的第8个子view放到下一行

flex-wrap:wrap

浅谈微信小程序flex布局基础

图5

1.1.3容器属性: flex-flow

flex-flow: wrap row,编译运行结果:如图5所示,flex-flow相当于 flex-direction和flex-wrap两个属性的组合

1.1.4容器属性:justify-content

在.container1增加如下代码:编译运行如图6所示。表示在主轴上的对齐方式,由于上面代码我们设置flex-flow: wrap row---相当于主轴为从左到右,所以一行显示不下的第8个元素在下一行居中显示,而前七个子view,也在一行中居中显示,左右两侧就有空白留边

justify-content:center

浅谈微信小程序flex布局基础

图6

justify-content:flex-end (主轴为左到右情况下:右对齐)

编译运行效果如图7所示:

浅谈微信小程序flex布局基础

图7

justify-content:flex-start (主轴为左到右情况下:左对齐)不举例显示了

justify-content:space-around---效果如图8所示,每个子view左右都有留边

浅谈微信小程序flex布局基础

图8

justify-content:space-between---效果如图9所示,每个子view左右都有留边,但是首尾两个view各自左右对齐不留边

浅谈微信小程序flex布局基础

图9

1.1.5容器属性:align-items

上面已经很详细讲解主轴上的对齐方式,这里关于这个交叉轴上的对齐方式同理很简单,就不详细展开了。

1.2.1 容器内元素属性:flex-grow

layout.wxml中修改代码如下:增加i3

<view class="item1 i3">
 3
 </view>

layout.wxss中修改代码如下:在item1中增加:  flex-grow: 1,增加i3,表示在一行中如果有剩余空间的话,i3之外的子view占1份空间,而i3子view占2份空间,编译运行效果如图10所示:可以看出i3view所占据的空间比其余3个子view大,但是没有到2倍

.item1{
  height:100rpx;
  width:100rpx;
  background-color:cyan;
  border: 1px solid #fff;
  flex-grow: 1
}

.i3{
  flex-grow: 2
}

浅谈微信小程序flex布局基础

图10

1.2.2容器内元素属性:flex-shrink

layout.wxml再增加4个子view

layout.wxss中修改代码如下:i3的flex-shrink为0,其余子view为1,这表示当空间不足时所有子view都等比缩小,但是i3的view保持大小不变,编译运行,效果如图11所示

.item1{
  height:100rpx;
  width:100rpx;
  background-color:cyan;
  border: 1px solid #fff;
  flex-shrink: 1
}


.i3{
  flex-shrink: 0
}

浅谈微信小程序flex布局基础

图11

1.2.3容器内元素属性:flex-basis

layout.wxss中修改代码如下:其他代码保持不变不变,编译运行,效果如图12所示

.i3{
  flex-shrink: 0;
  flex-basis: 200rpx
}

浅谈微信小程序flex布局基础

图12

1.2.4容器内元素属性:flex

flex是grow,shink,basis几个属性的合并,layout.wxss中修改代码如下:其他代码保持不变不变,编译运行,效果和图12保持一样

.i3{
  flex:0 0 200rpx
}

1.2.5容器内元素属性:order

layout.wxml中修改代码如下:设置每个view的order属性为其显示的顺序,编译运行,效果如图13所示:

<view >

 <view >
 1
 </view>

<view >
 2
 </view>

 <view >
 3
 </view>

 <view >
 4
 </view>

</view>

浅谈微信小程序flex布局基础

图13

1.2.6容器内元素属性:align-self

设置每个元素自身的对齐方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 #Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 #Javascript
原生JS实现前端本地文件上传
Sep 08 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP URL路由类实例
2013/11/12 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
详解python中递归函数
2019/04/16 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python实现超市商品销售管理系统
2019/11/22 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
师范生自荐信
2013/10/27 职场文书
自我评价的范文
2014/02/02 职场文书
期末学生评语大全
2014/04/24 职场文书
个人求职自荐信范文
2014/06/20 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python