专栏首页算法与编程之美微信小程序|flexbox layout—快速实现基本布局

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

END

编 辑 | 王楠岚

责 编 | 江汪霖

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|登录界面的框架搭建

    当新用户登录一个APP时,输入手机号获取验证码的登录方式是比较快捷的。那么如何利用微信小程序制作一个常见的手机接收验证码的登录界面呢?

    算法与编程之美
  • 计算机视觉|视频图像的预处理

    在分析图像问题时,由于环境和拍摄自身因素影响,使得在需要处的图像存在一定的问题,同时由于操作的要求,需要对图像进行一定的转换,所以,在处理图像之前,要对图像做出...

    算法与编程之美
  • JavaWeb|浅谈Cookie

    Cookie,有时也用其复数形式 Cookies。类型为“小型文本文件”,是某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经...

    算法与编程之美
  • 使用SAP CRM text api将空的文本写入到后台,会发生什么事

    Subject: RE: 使用text api将空的text update到后台的可行性研究

    Jerry Wang
  • 15个新鲜出炉的 Photoshop 文本效果教程

     文本效果可能是 Photoshop 图形设计中最常用和最通用的技术之一。最重要的是你可以使用任何效果,风格或纹理来产生有趣的排版,越多人尝试过它并制作了一些精...

    用户4962466
  • 5G光传送网技术

    5G商用,承载先行。日前,中国电信正式对外发布了《5G时代光传送网技术白皮书》。该白皮书针对未来5G业务和网络架构的变化,清晰的描述了未来5G承载技术,非常值得...

    企鹅号小编
  • python图像处理-字符画风格图片

    本系列课程是针对无基础的,争取用简单明了的语言来讲解,学习前需要具备基本的电脑操作能力,准备一个已安装python环境的电脑。如果觉得好可以分享转发,有问题的地...

    用户7054460
  • NLTK学习笔记(一)

    len(text)  #单词个数 set(text)  #去重 sorted(text) #排序 text.count('a') #数给定的单词的个数 text...

    NateHuang
  • 开发小程序的一些小经验

    图片在微信小程序中可以说是一个神奇的存在。在web开发中,我们会利用图片的自适应比如百分比而省去不少麻烦,因为高度会自适应。但是小程序中的图片都有一个初始大小,...

    小美娜娜
  • GPU 高性能计算,加速脑与认知科学发展

    项目背景 上海纽约大学是国家教育部正式批准的、具有独立法人资格和学位授予权的第一所中美合作举办的国际化学,也是纽约大学全球教育体系的组成部分。学校配置国际一流的...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券