微信小程序开发详解（九）---微信小程序布局基础

1：Flex布局

Flex布局如图1所示

图1

1.1 Flex容器属性

1.2 Flex容器内元素属性

align如果定义会覆写掉容器属性中的justify-content，align-items设置的属性

微信小程序开发工程中，新建文件layout，然后新建各种文件（以layout命名），

在layout.wxml中加入如下代码：

<view class="container1">

</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）

图2

修改.container1如下：（增加display:flex;）编译运行如图3所示：可以看出flex布局为默认横向排列元素

.container1{
height: 100%;
width:100%;
background-color:beige;
display: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

图4

如果修改为如下代码：编译运行如图5所示：保证每个子view都是正方形，然后放不下的第8个子view放到下一行

flex-wrap:wrap

图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

图6

justify-content:flex-end （主轴为左到右情况下：右对齐）

编译运行效果如图7所示：

图7

justify-content:flex-start （主轴为左到右情况下：左对齐）不举例显示了

justify-content:space-around---效果如图8所示，每个子view左右都有留边

图8

justify-content:space-between---效果如图9所示，每个子view左右都有留边，但是首尾两个view各自左右对齐不留边

图9

1.1.5容器属性：align-items

上面已经很详细讲解主轴上的对齐方式，这里关于这个交叉轴上的对齐方式同理很简单，就不详细展开了。

1.2.1 容器内元素属性：flex-grow

layout.wxml中修改代码如下：增加i3

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
}

图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
}

图11

1.2.3容器内元素属性：flex-basis

layout.wxss中修改代码如下：其他代码保持不变不变，编译运行，效果如图12所示

.i3{
flex-shrink: 0;
flex-basis: 200rpx

}

图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 class="container1">

</view>

图13

1.2.6容器内元素属性：align-self

设置每个元素自身的对齐方式

微信小程序开发详解（九）---微信小程序布局基础相关推荐

微信公众号开发详解02【自动回复、发布文章、自定义菜单、3种链接跳转】
[微信公众号--零基础全面系统教学] [P01-P07]微信公众号开发详解01[目的.起名.准备工作.注册流程.后台功能] [P08-P12]微信公众号开发详解02[自动回复.发布文章.自定义菜单 ...
微信公众号开发详解01【目的、起名、准备工作、注册流程、后台功能】
[微信公众号--零基础全面系统教学] [P01-P07]微信公众号开发详解01[目的.起名.准备工作.注册流程.后台功能] [P08-P12]微信公众号开发详解02[自动回复.发布文章.自定义菜单 ...
Android开发详解之App升级程序一点通
Android开发详解之App升级程序一点通结束语 UpdateManager.java import java.io.File; import java.io.FileOutputStream; ...
【Windows 应用程序开发详解】三.Windows开发工具配置与使用(一）
[Windows 应用程序开发详解]三.Windows开发工具配置与使用一.Visual C/C++ 我们都知道在应用程序开发的时候都是要依赖于开发工具的,Windows主机应用程序绝大多数都是使用 ...
《嵌入式Linux应用程序开发详解》PDF完整版及源代码
<嵌入式Linux应用程序开发详解>PDF完整版及源代码免费下载地址在 http://linux.linuxidc.com 用户名与密码都是www.linuxidc.com 具体目 ...
【Windows 应用程序开发详解】四.Windows开发基本概念和相关术语（一）
[Windows 应用程序开发详解]四.Windows开发基本概念和相关术语一.Windows API 二.服务.函数和例程一.Windows API Windows API介绍: Windows ...
一、微信小程序开发详解
目录 1.什么是小程序? 2.小程序可以干什么? 3.相关资料第一个小程序一.申请帐号二.测试号申请三.安装开发工具四.你的第一个小程序五.编译预览六.目录结构七.JSON 配置八. ...
linux应用程序开发数据,《嵌入式linux应用程序开发详解》核心笔记
[linux快速入门] 自由软件(free software)中的 free 并不是指免费,而是指自由.它赋予使用者四种自由. · 自由之一:有使用软件的自由. · 自由之二:有研究该软件如何运作的自 ...
微信端php 开发技术要求,微信第三方平台开发详解——PHP版
申请第三方平台,这个很简单直接按照提示填写,下面的授权事件接收URL中获取的component_verify_ticket是会过期的,所以不要只获取一次,缓存起来每10分钟会发送一次,每1小时会更新一 ...
基础版微信模板消息开发详解，附代码PHP
1.什么是模板消息? 微信为防止服务号对用户进行恶意骚扰和营销,而服务号在某些场景又必须给用户发送消息时(如购物成功.支付成功),这时候就可以应用微信提供的模板消息来给用户进行提醒. 2.模板消息能做 ...

微信小程序开发详解（九）---微信小程序布局基础

微信小程序开发详解（九）---微信小程序布局基础相关推荐

最新文章

热门文章