微信小程序-Flex布局的使用

一、基本说明：

Flex模型能够提高页面的布局效率，对于微信小程序来说，当页面需要适应不同屏幕尺寸及设备类型时，使用该模型布局可以得到事半功倍的效果。
Flex模型也称为盒子模型(FlexiableBox)，就相当于一个盒子里面按分类放着很多东西，我们将这个盒子称为容器(container)，容器内部的组件我们称为项目(item)。
Flex布局的坐标系是以容器左上角为原点，自原点往右、往下两条坐标轴。在默认情况下是水平布局，即水平方向从左往右为主轴，垂直方向自上而下为交叉轴；垂直布局则相反。

flex布局微信官方说明文档链接：微信官方说明文档

通过对flex布局的简单了解后，我们开始进行简单的使用

二、容器属性

首先我们定义一个宽高都为700rpx的容器,为了使效果更加直观，我们定义背景颜色为红色。
图2.0.1

然后为容器里面添加三个宽高都为200rpx的项目，为了使效果更加直观，我们定义背景颜色为黄色。
图2.0.2

1、flex-direction属性

用于设置主轴方向，通过设置坐标轴可以规定项目的排列方向
属性取值

row：默认值，主轴在水平方向从左到右，项目按主轴方向从左到右排列
row-reverse：主轴是row的反方向，项目按主轴方向从右到左排列
column：主轴在垂直方向从上往下，项目按主轴放从上往下排列
column-reverse：主轴是column的反方向，项目按主轴方向从下往上

当flex-direction取值为row时，效果以及代码如下图
图2.1.1
在这里插入图片描述
当flex-direction取值为column时，效果以及代码如下图
图2.1.2

注意：使用flex布局必须先声明 display：flex

2、flex-wrap属性

用于规定是否允许项目换行，以及多行排列时的换行方向
属性取值：

nowrap：默认值，表示不换行，项目过多会导致压缩
wrap：当容器单行容不下所有项目会进行换行
wrap-reverse：当容器单行容不下所有项目会进行换行，换行为wrap的反方向。

为了进行演示，我们为该容器增加多三个项目D、E、F，wxml代码如下图
在这里插入图片描述
当flex-wrap取值为nowrap时，效果以及代码如下图
图2.2.2

当flex-wrap取值为wrap时，效果以及代码如下图
图2.2.3

3、justify-content属性

该属性用于设置项目在主轴方向上的对齐方式，以及分配项目之间的多余空间。
常用属性值：

flex-start：默认值，项目间不留空隙
center：项目在主轴上居中排列，项目间不留空隙。
space-around：第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间距的一半。

当flex-wrap取值为wrap的前提下，justify-content取值为space-around效果以及代码如下图
图2.3.1
在这里插入图片描述

4、align-items属性

该属性用于设置项目在行中的对齐方式。
常用属性值：

stretch：默认值，未设置项目尺寸时，将项目拉满
flex-start：项目顶部与交叉轴起点对齐
flex-end：项目底部与交叉轴终点对齐
center：项目在交叉轴居中对齐

当flex-wrap取值为wrap，justify-content取值为space-around的前提下，align-items取值为center效果以及代码如下图
图2.4.1
在这里插入图片描述

5、align-content属性

该属性用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目及其周围的多余空间。
常用属性取值：

stretch：默认值，未设置尺寸时，将各行项目拉满
flex-start：首行在交叉轴起点开始排列，行间不留间距。
center：行在交叉轴中点排列，行间不留距。
flex-end：尾行在交叉轴终点开始排列，行间不留距。

当flex-wrap取值为wrap，justify-content取值为space-around的前提下，align-content取值为center效果以及代码如下图
图5.1.1
在这里插入图片描述

注意：
1、align-items和align-content本质上的区别为项目行与行间留不留间距
2、justify-content和align-content的区别为justify是定义主轴方向上的对齐方式，align是定义交叉轴方向的对齐方式。

综合案例：

在一容器中定义6个项目，项目设置为主轴在水平方向上从左到右排列，若当行容纳不下所有项目，则进行换行，项目水平方向的对齐方式采用space-around属性，项目在行中居中对齐。同时定义项目内元素位于项目的中心。

题目解析：
定义容器的属性：
首先容器定义flex布局 display:flex;
项目设置为主轴在水平方向上从左到右排列 flex-direction:row ;
若当行容纳不下所有项目，则进行换行 flex-wrap:wrap ;
项目水平方向的对齐方式采用space-around属性justify-content:space-around ;
项目在行中居中对齐 align-items:center ;

定义项目内元素位于项目的中心(即主轴和交叉轴均居中对齐）：
项目定义flex布局 display:flex ;
主轴对齐： justify-content: center ;
交叉轴对齐： align-items: center ;

实现效果如下图：
图2.6.1

案例完整代码：

index.wxml

<view class="container">
<view class="item">项目A</view>
<view class="item">项目B</view>
<view class="item">项目C</view>
<view class="item">项目D</view>
<view class="item">项目E</view>
<view class="item">项目F</view>
</view>

index.wxss

.container{
width:700rpx;
height:750rpx;
margin: 25rpx;
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}

.item{
display: flex;
align-items: center; /*交叉轴方向居中 */
justify-content: center; /*主轴方向居中*/
border: 1rpx solid black;
width:200rpx;
height:200rpx;
background-color: yellow;
}

小聪同学鸭

发布了3 篇原创文章 · 获赞 5 · 访问量 221

私信关注