浅谈微信小程序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 API学Jquery之一 选择器
Apr 07 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
javascript实现下雨效果
Mar 27 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
漂亮但不安全的CTB
2006/10/09 PHP
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
jquery为页面增加快捷键示例
2014/01/31 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python画折线图的程序
2018/07/26 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
运动会加油稿100字
2014/09/19 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL