浅谈微信小程序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 相关文章推荐
js调用css属性写法
Sep 21 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Javascript中的作用域及块级作用域
Dec 08 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python 忽略warning的输出方法
2018/10/18 Python
pygame实现五子棋游戏
2019/10/29 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Flask处理Web表单的实现方法
2021/01/31 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
捐赠仪式主持词
2014/03/19 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
环卫工作个人总结
2015/03/04 职场文书
幽默导游词开场白
2015/05/29 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js