浅谈微信小程序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使用height()获取高度需要注意的地方
Dec 13 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
微信小程序文章详情页面实现代码
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
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
python通过smpt发送邮件的方法
2015/04/30 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
什么是servlet
2012/05/08 面试题
2014年党支部书记工作总结
2014/12/04 职场文书
先进教师事迹材料
2014/12/16 职场文书
责任书格式
2015/01/29 职场文书
好好学习保证书
2015/02/26 职场文书
工作会议通知
2015/04/15 职场文书
思想品德课教学反思
2016/02/24 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电