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

 更新时间:2020-03-25 02:16:08   作者:佚名   我要评论(0)

问题描述
flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲

问题描述

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
}

效果图展示:

图 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布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • 微信小程序框架的页面布局代码
  • 详解微信小程序之scroll-view的flex布局问题
  • 浅谈微信小程序flex布局基础
  • 微信小程序实现瀑布流布局与无限加载的方法详解
  • 微信小程序 UI布局常用技巧整理总结
  • 微信小程序 简单DEMO布局,逻辑,样式的练习
  • 微信小程序 Flex布局详解

相关文章

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

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

    问题描述 flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲
    2020-03-25
  • 解决Android Studio Gradle Metadata特别慢的问题

    解决Android Studio Gradle Metadata特别慢的问题

    如下所示: 更改build.gradle buildscript { repositories { // jcenter() // jcenter(){ url 'http://jcenter.bintray.com/'} maven{url 'http://m
    2020-03-25
  • Java线程优先级和守护线程原理解析

    Java线程优先级和守护线程原理解析

    一、线程优先级的介绍 java 中的线程优先级的范围是1~10,默认的优先级是5。“高优先级线程”会优先于“低优先级线程”执行。 java 中有两种线程:用户线程和守护线
    2020-03-25
  • Android实现获取meta-data和build.gradle的值

    Android实现获取meta-data和build.gradle的值

    有时候会用到meta-data中的参数,比如定义的渠道号,类似友盟统计。也会用到定义在build.gradle文件中android标签下的defaultConfig标签下,添加manifestPlaceholde
    2020-03-25
  • Java如何使用interrupt()终止线程

    Java如何使用interrupt()终止线程

    一、interrupt() 说明 interrupt()的作用是中断本线程。 本线程中断自己是被允许的;其它线程调用本线程的interrupt()方法时,会通过checkAccess()检查权限。这有
    2020-03-25
  • Android获取清单文件中的meta-data,解决碰到数值为null的问题

    Android获取清单文件中的meta-data,解决碰到数值为null的问题

    1.meta-data是什么?如何获取meta-data? 在AndroidManifest.xml中,元素可以作为子元素,被包在activity、application 、service、或者receiver元素中,不同的父元
    2020-03-25
  • 安装多版本Vue-CLI的实现方法

    安装多版本Vue-CLI的实现方法

    安装多版本Vue-CLI,即在电脑上同时安装多个版本的Vue-CLI。那么为什么要安装多个版本呢&#63;原因是Vue-cli3.0版本与之前的版本有了较大不同,当你要处理3.0之前的项
    2020-03-24
  • Dialog全屏,去掉状态栏的方式

    Dialog全屏,去掉状态栏的方式

    dialog即使设置全屏了,但还是有状态栏占用高度这; 直接将下面这行代码放到你的dialog中即可 @Override protected void onStart() { super.onStart(); int
    2020-03-24
  • ios uicollectionview实现横向滚动

    ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo 实现上我选择了使用UICollectionView ;用UICollecti
    2020-03-24
  • Java多线程连续打印abc实现方法详解

    Java多线程连续打印abc实现方法详解

    一道编程题如下: 实例化三个线程,一个线程打印a,一个线程打印b,一个线程打印c,三个线程同时执行,要求打印出10个连着的abc。 题目分析: 通过题意我们可以得出
    2020-03-24

最新评论