微信小程序 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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
Javascript webpack动态import
Apr 19 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
安装多版本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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php生成略缩图代码
2012/07/16 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python基础教程之Filter使用方法
2017/01/17 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
2015年见习期工作总结
2014/12/12 职场文书
产品调价通知函
2015/04/20 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
django上传文件的三种方式
2021/04/29 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android