三、 flex介绍
1. flex容器 布局
为什么使用 flex布局
- 小程序在布局方面上建议使用 flex 布局进行排版
- flex 就是一个盒装的弹性布局,自适应
- 简单方便
这里简单介绍下flex简单使用:
-
父级开启 flex 布局: display:flex
-
定义flex 容器的布局:
- flex-direction: 主轴的方向 (排列方向)
- flex-wrap: 换行规格
- justify-content: 对齐方式
注意,这是flex容器布局的主要三中方式,之后会介绍flex容器成员的属性
-
子级需要是块级元素
a. flex-direction 属性值:
- row 行正向 (从左到右,默认值)
- row-reverse 行反向 (从右到左)
- column 列正向 (从上到下,小程序全局容器一般设置此值)
- column 列方向 (从下到上)
简单演示下
<!-- index.wxml -->
<view class="container">
<view class="a size">a</view>
<view class="b size">b</view>
<view class="c size">c</view>
<view class="d size">d</view>
</view>
/** index.wxss */
.container {
display: flex;
/*读者可以自己测试下*/
flex-direction: column; /*这里是从上到下*/
}
.size {
height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
width: 150rpx; /** 读者可以去了解下视网膜界限 */
}
.a {
background-color: red;
}
.b {
background-color: yellow;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
b. flex-wrap: 换行
- nowarp 不换行 (默认值)
- wrap 换行
- wrap-reverse 倒序换行
/** 修改下样式 */
.container {
display: flex;
/*读者可以自己测试下*/
flex-direction: row; /*这里是从做到右*/
/*flex-wrap: nowarp;*/ /*子元素宽度过长是,会平均分配给每个子元素按照比例来得到自己元素所得到的宽度*/
flex-wrap: warp; /** 显示宽度不够,自动换行*/
}
.size {
height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
/*修改*/
width: 300rpx; /** 读者可以去了解下视网膜界限 */
}
c. justify-content: (主轴)对齐方式,有种类似于 float 浮动
- flex-start: 左对齐(默认)
- flex-end: 右对齐()
- flex-center: 居中对齐(元素间有空白)
- space-between: 两端对齐(元素间有空白,两端没空白)
- space-around: 围绕对齐(元素间有空白,两端也有空白)
/** 修改下样式 */
.container {
display: flex;
/*读者可以自己测试下*/
justify-content: center;/*个人觉得比较常用的是center*/
}
.size {
height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
/*修改*/
width: 100rpx; /** 读者可以去了解下视网膜界限 */
}
d. 补充:
常用侧轴的布局控制:align-items: 侧轴对齐方式类似 justify-content ,其他的,如果需要,我在介绍
2. flex容器成员的属性
-
order: 成员之间的显示顺序(值从小到大依次排列)
-
flex: 成员所占屏幕的比例 (使用flex,width属性失效),
成员宽度 = 成员flex值 / 成员flex值之和 * 父级宽度
/*修改属性*/
.a {
background-color: red;
order: 3;
flex: 1;
}
.b {
background-color: yellow;
order: 1;
flex: 1;
}
.c {
background-color: blue;
order: 2;
flex: 1;
}
.d {
background-color: black;
order: 4;
flex: 1;
}