flex布局
不论是支付宝, 还是微信等小程序都是推荐使用flex布局的. flex布局会有后面的章节以及示例项目中都有贯穿使用.
flex布局的概念
- flexible box: 弹性盒状布局
- 容器控制内部元素的布局定位
- CSS3引入的新布局模型
- 伸缩元素,自由填充,自适应
使用flex布局的优势
- 可在不同方向排列元素
- 控制元素排序的方向
- 控制元素的对齐方式
- 控制元素之间等矩
- 控制单个元素放大与缩放比例,占比,对齐方式
flex常用术语
- flex container, flex容器
- flex item, flex元素
- flex direction, 布局方向
flex布局模型
主轴和交叉轴也可以交换方向
flex属性
flex-direction, 设置元素的排列方向
- row
- row-reverse
- column
- column-reverse
示例代码
<template>
<view class="container">
<view class="green txt">
green
</view>
<view class="red txt">
red
</view>
<view class="blue txt">
blue
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20px;
width: 300upx;
height: 300upx;
}
</style>
row, row-reverse
flex-direction: row
效果
flex-direction: row-reverse
效果
column, column-reverse
flex-direction: column
效果
flex-direction: column-reverse
效果
flex-wrap, 使容器内的元素换行
- nowrap, (默认值)不换行, 多个元素时, 会做一定的缩放
- wrap
- wrap-reverse
示例代码
修改下上面的示例代码:
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
nowrap 效果
wrap 效果
wrap-reverse 效果
justify-content, 设置元素在主轴上的对齐方式
justify-content, 定义了flex容器中flex成员项在主轴方向上如何排列以处理空白部分, 默认为flex-start
- flex-start, (默认值)左对齐或向上对齐
- flex-end, 右对齐或向下对齐
- center, 居中对齐
- space-between, 两端对齐, 元素之间平均等分剩余空白间隙部分
- space-around, 元素两边平均等分剩余空白间隙部分, 最左(最上)或最右(最下)和元素之间的距离比是1:2
示例代码
修改如上示例代码:
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
flex-start, (默认值)左对齐或向上对齐
flex-end, 右对齐或向下对齐
center, 居中对齐
space-between, 两端对齐, 元素之间平均等分剩余空白间隙部分
space-around, 元素两边平均等分剩余空白间隙部分, 最左(最上)或最右(最下)和元素之间的距离比是1:2
align-items, 设置元素在交叉轴上的对齐方式
- stretch, (默认)当元素的高度没有设置时, 元素的高度会被拉伸并与容器高度一致
- flex-start, 在交叉轴上向起点位置(向上/向左)对齐
- flex-end, 在交叉轴上向结束位置(向下/向右)对齐
- center, 居中对齐
- baseline, 保证元素中的文字在同一条基准线上(保证每个文字都在同一条线上)
示例代码
<template>
<view class="container">
<view class="green txt" style="height: 200upx;font-size: 30px;">
green1
</view>
<view class="red txt" style="font-size: 10px;">
red1
</view>
<view class="blue txt" style="height: 300upx;font-size: 50px;">
blue1
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
height: 800upx;
background-color: #F8F8F8;
align-items: stretch;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20px;
/* width: 100upx;
height: 100upx; */
}
</style>
stretch, (默认)当元素的高度没有设置时, 元素的高度会被拉伸并与容器高度一致
flex-start, 在交叉轴上向起点位置(向上/向左)对齐
flex-end, 在交叉轴上向结束位置(向下/向右)对齐
center, 居中对齐
baseline, 保证元素中的文字在同一条基准线上(保证每个文字都在同一条线上)
align-content, 设置轴线的对齐方式(轴线当做元素)
- stretch,(默认值)
- flex-start
- flex-end
- center
- space-between
- space-around
示例代码:
<template>
<view class="container">
<view class="green txt">
green1
</view>
<view class="red txt">
red1
</view>
<view class="blue txt">
blue1
</view>
<view class="green txt">
green2
</view>
<view class="red txt">
red2
</view>
<view class="blue txt">
blue2
</view>
<view class="green txt">
green3
</view>
<view class="red txt">
red3
</view>
<view class="blue txt">
blue3
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: stretch;
height: 150px;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20upx;
width: 60upx;
height: 60upx;
}
</style>
stretch, 拉伸
当width/height没有设置时, 轴线可以被拉伸 修改下代码:
.container{
/* 定义flex容器 */
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: stretch;
height: 300upx;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20px;
/* width: 60upx; */ // 注释此行代码
height: 60upx;
}
因为flex-direction: column;
纵向是主轴, 因此需要将flex item的width注释掉. 效果如下
center, 居中
当轴线超过1条时, flex容器可以把多条轴线视为元素对待, 进行对齐
flex-start, 向上/向左对齐
flex-end, 向下/向右对齐
space-between, 两端对齐
元素之间的空白等比切分
space-around
轴线两边的空白等比切分
flex元素的属性
order, 控制元素的顺序
- 用于设置flex容器内的每个元素的排列顺序
- 排序规则: 由小到大
- 默认值为 0
示例代码:
<template>
<view class="container">
<view class="green txt">
green1
</view>
<view class="red txt">
red1
</view>
<view class="blue txt">
blue1
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 800upx;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20px;
width: 200upx;
height:200upx;
}
</style>
默认情况下, order值为0, 效果如下:
修改代码如下:
.green{
background-color: #4CD964;
order: 3;
}
.red{
background-color: red;
order: 2;
}
.blue{
background-color: blue;
order: 1;
}
效果如下:
flex-grow, 控制元素放大比例
- 默认值为 0
- 用于设置元素的放大比例, 若为0, 则不放大.
使用前提: 撑满剩余的空间
修改如上代码如下:
.green{
background-color: #4CD964;
order: 3;
flex-grow: 0;
}
.red{
background-color: red;
order: 2;
flex-grow: 0;
}
.blue{
background-color: blue;
order: 1;
flex-grow: 0;
}
效果如下:
将.red
设置flex-grow: 1
.red{
background-color: red;
order: 2;
flex-grow: 1;
}
效果如下:
若将其他两个元素也设置同样的值: flex-grow: 1
.green{
background-color: #4CD964;
order: 3;
flex-grow: 1;
}
.red{
background-color: red;
order: 2;
flex-grow: 1;
}
.blue{
background-color: blue;
order: 1;
flex-grow: 1;
}
将会发现, 这3个元素的放大后的比例是一致的. 即将剩余空间进行等比例平分了.
更进一步的, 若修改代码:
.red{
background-color: red;
order: 2;
flex-grow: 2;
}
则空间划分比例为: 1:2:1, 效果如下:
flex-shrink, 控制元素缩小的比例
- 默认值为 1, 当设置为0时, 不进行缩放
- 用于定义元素的缩放比例
使用前提: 当前的空间已满, 需要进行缩放
为更好的呈现出效果, 多增加flex元素, 修改后, 代码如下:
<template>
<view class="container">
<view class="green txt">
green1
</view>
<view class="red txt">
red1
</view>
<view class="blue txt">
blue1
</view>
<view class="green txt">
green2
</view>
<view class="red txt">
red2
</view>
<view class="blue txt">
blue2
</view>
<view class="green txt">
green3
</view>
<view class="red txt">
red3
</view>
<view class="blue txt">
blue3
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
height: 800upx;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 12px;
width: 200upx;
height:200upx;
}
</style>
效果如下:
将.red
的``设置为0时
.red{
background-color: red;
flex-shrink: 0;
}
可以看到如下效果:
若其他元素, 也不进行缩放, 即: flex-shrink: 0;
.green{
background-color: #4CD964;
flex-shrink: 0;
}
.red{
background-color: red;
flex-shrink: 0;
}
.blue{
background-color: blue;
flex-shrink: 0;
}
则多余的元素可能会被放到外边界了, 效果如下:
flex-basis, 设置元素固定或自动空间的占比
示例代码:
<template>
<view class="container">
<view class="green txt">
green1
</view>
<view class="red txt">
red1
</view>
<view class="blue txt">
blue1
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
height: 800upx;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 12px;
width: 200upx;
height:200upx;
}
</style>
当前效果如下:
这里我们单独将.red
进行放大
.red{
background-color: red;
flex-basis: 300upx;
}
当然, 也可以进行缩放, .red
元素会使用.txt
的宽度200upx, 这里我们进行缩小
.red{
background-color: red;
flex-basis: 100upx;
}
.txt{
font-size: 12px;
width: 200upx;
height:200upx;
}
align-self, 重写align-items父属性
- auto, 默认值, 表示继承父级元素的align-items属性值
- stretch, 当元素的高度没有设置时, 元素的高度会被拉伸并与容器高度一致
- flex-start, 在交叉轴上向起点位置(向上/向左)对齐
- flex-end, 在交叉轴上向结束位置(向下/向右)对齐
- center, 居中对齐
- baseline, 保证元素中的文字在同一条基准线上(保证每个文字都在同一条线上)
示例代码
<template>
<view class="container">
<view class="green txt" style="height: 200upx;font-size: 30px;">
green1
</view>
<view class="red txt" style="font-size: 10px;">
red1
</view>
<view class="blue txt" style="height: 300upx;font-size: 50px;">
blue1
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.container{
/* 定义flex容器 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
height: 800upx;
background-color: #F8F8F8;
align-items: baseline;
}
.green{
background-color: #4CD964;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.txt{
font-size: 20px;
/* width: 100upx;
height: 100upx; */
}
</style>
当前align-items: baseline
, 效果图如下:
若不想让red1
向上或向下对齐, 该怎么处理呢?
修改代码如下:
.red{
background-color: red;
align-self: flex-start;
}
可以看到.red
是向上对齐的
也可以改为:
.red{
background-color: red;
align-self: center;
}
效果图如下:
若将.red
修改为align-self: stretch;
会怎么样呢? 需要注意的是, 要将.red
不设置高度, 否则会不生效. 修改代码如下:
<view class="red" style="font-size: 10px;">
red1
</view>
同时修改css
.red{
background-color: red;
align-self: stretch;
}
最终效果如下: