微信小程序 flexbox layout快速实现基本布局的解决方案


Posted in Javascript onMarch 24, 2020

问题描述

flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢?

传统的布局方式对布局目标的实现属性赋值非常的分散,严重依赖内容的大小和页面的结构,这样操作起来非常的麻烦。而弹性盒子就比较灵活、统一,可以对整个页面的布局进行总体把控设置。弹性盒子就是将页面的内容整体放进一个容器里面进行整体的有结构的布局设置让页面更加和谐。

解决方案

首先,对 flexbox layout 的使用方法进行简单介绍。

先将所需封装的内容放在一个 view 容器里面,再对该 view 容器定义一个 class 。然后需要在 wxss 里面对 class 进行设置布局。

在 wxss 中首先用 display : flex 将 view 容器变成一个弹性盒子,但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。

这里以从上往下的主轴方向,垂直方向上均匀分布,元素在水平方向上居中显示为例。在 wxss 用 flex-direction : column 来实现从上到下的布局。但是会发现段与段之间太紧促了,这个时候就需要让段落均匀分布,用 justify-content : space-around 来实现。(注意:在使用 justify-content 的时候我们需要根据自己设置的布局方向对页面的高度(宽度)进行适配,小程序会根据你所设置的对段落间的空间进行调整。)。最后让元素在水平方向上居中显示,需要用 align-items : center 来实现。

下面是用两个弹性盒子(一个是垂直方向,另一个是水平方向)布局的案例代码:

表 3.1.wxml 代码

<view>
<image src="/pages/img/ 宣传图 2.jpg"></image>
<text> 从我做起 </text>
<text> 不信谣!不传谣! </text>
<text> 相信政府!相信国家! </text>
</view>
<view>
<text> 戴口罩,勤洗手 </text>
<text> 不扎堆,拒聚餐 </text>
<text> 吃熟食,禁野味 </text>
<text> 常通风,勿恐慌 </text>
<text> 早就医,莫轻视 </text> 
</view>

表 3.2.wxss 代码

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}

效果图展示:

微信小程序 flexbox layout快速实现基本布局的解决方案

图 3.1

flexbox layout 的属性总结:

弹性盒子布局具有六大属性:

( 1 ) flex-direction 属性决定主轴的方向

row (默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column :主轴为垂直方向,起点在上沿。

column-reverse :主轴为垂直方向,起点在下沿

( 2 ) flex-wrap属性决定元素的换行

nowrap (默认):不换行。

wrap :换行,第一行在上方

wrap-reverse:换行,第一行在下方。

( 3 ) flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式

( 4 ) justify-content 属性定义内容在主轴上的对齐方式。

flex-start(默认值):左对齐。

flex-end:右对齐。

center : 居中。

space-between:两端对齐,项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。

( 5 ) align-items 属性定义项目在交叉轴上如何对齐。

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center :交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设为auto ,将占满整个容器的高度。

( 6 ) align-content 属性定义了多根轴线的对齐方式

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center :与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

结语

flexbox layout 弹性盒子布局以上只是介绍了简单的容器属性。由上面的介绍和代码例子可以看出用它来对页面布局非常的方便和快捷,所写的代码也十分精简。掌握弹性盒子的容器属性就可以轻松的玩转小程序的页面布局,高效又简单。

到此这篇关于微信小程序 flexbox layout快速实现基本布局的解决方案的文章就介绍到这了,更多相关小程序flexbox layout布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
js实现页面图片消除效果
Mar 24 #Javascript
js实现消灭星星(web简易版)
Mar 24 #Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 #Javascript
javascript实现滚动条效果
Mar 24 #Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 #Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php创建多级目录的方法
2015/03/24 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
项目实践之javascript技巧
2007/12/06 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue实现购物车列表
2020/06/30 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python爬虫开发与项目实战
2020/12/16 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
党员群众路线对照检查材料
2014/08/31 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
欠款证明
2015/06/24 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
高一作文之暖冬
2019/11/09 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python