浅谈微信小程序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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 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
如何实现php图片等比例缩放
2015/07/28 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
bootstrap模态框示例代码分享
2017/05/17 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
争先创优活动总结
2014/08/27 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
神秘岛读书笔记
2015/07/01 职场文书
迎新年主持词
2015/07/06 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers