Flex布局

概念

flexible box：弹性盒装布局
容器控制内部元素的布局定位
CSS3引入的新布局模型
伸缩元素，自由填充，自适应

优势

可在不同方向排列元素
控制元素排序的方向
控制元素的对齐方式
控制元素之间等距
控制单个元素放大与缩放比例，占比，对齐方式

常用术语

• flex container

flex容器

• flex item

flex项目（元素）

• flex direction

布局方向

模型

容器的属性

1、flex-direction

设置flex容器中flex成员项也就是元素的排列方向

• row

从左向右

• row-reverse

从右向左

• column

从上到下

• column-reverse

从下到上

<template>
    <view class="container">
        <view class="green txt">A</view>
        <view class="red txt">B</view>
        <view class="blue txt">C</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
<style>
    @import url("flex-direction.css");
</style>

flex-direction.css

.container{
        /* 定义flex容器 */
        display: flex;
        /* 设置容器内部元素的排列方向
            row:从左到右
            column:从上到下
         */
        /* flex-direction:row; */
        flex-direction:column;
    }
    .txt{
        font-size: 20px;
        width: 150rpx;
        height: 150rpx;
    }
    .green{
        background-color: #007AFF;
    }
    .red{
        background-color: #2C405A;
    }
    .blue{
        background-color: #333333;
    }
    .text

导入外部样式

<template></template>
<script></script>
<style>
    @import url("flex-direction.css");
</style>

2、flex-wrap：使容器内的元素换行

nowrap

元素不会换行，永远会累加在最后一个元素之后
由于元素设置了一定的宽度，此时会进行一些相应的缩放，缩放比例每一个元素都是一致的

wrap

当超过一定量之后就会在第二行进行排列

wrap-reverse

逆向换行排序

.container{
        /* 定义flex容器 */
        display: flex;
        /* 设置容器内部元素的排列方向
            row:从左到右
            column:从上到下
         */
        flex-direction:row;
        flex-wrap: wrap;
    }

3、justify-content

设置元素在主轴上的对齐方式
定义了flex容器中flex成员项在主轴方向上如何排列以处理空白部分，默认为flex-start
主轴的方向是根据flex-direction来的

.container{
        display: flex;
        flex-direction:column;
        justify-content: center;
    }

flex-start

左对齐

flex-end

右对齐

center

居中对齐

space-between

元素与元素之间保留的间隙等分
两端对齐，空白均匀的填充到flex成员项之间

space-around

元素两边平均等分剩余空白间隙部分，最左或者最右和元素之间是1:2的关系

4、align-items

设置元素在交叉轴上的对齐方式
定义了flex容器中flex成员项在纵轴方向上如何排列以处理空白部分，默认为stretch

.container{
        display: flex;
        flex-direction:row;
        height: 800rpx;
        background-color: #007AFF;
        align-items: stretch;
    }

flex-start

在交叉轴上向起点位置（向上/向左）对齐

flex-end

在交叉轴上向结束位置（向下/向右）对齐

center

居中对齐

baseline

基准线，如果元素里有文字，会把文字作为基础线排成一行

<template>
    <view class="container">
        <view class="green txt" style="height: 200rpx; font-size: 30px;">
            A
        </view>
        <view class="red txt" style="font-size: 10px;">
            B
        </view>
        <view class="blue txt" style=" height:320rpx; font-size: 50px;">
            C
        </view>
    </view>
</template>
-----------------------------------
.container{
        display: flex;
        flex-direction:row;
        height: 800rpx;
        background-color: #007AFF;
        align-items: baseline;
    }

stretch（默认）

如果没有对元素设置高度，那么在交叉轴上会形成拉伸
此时会把元素高度拉到和外部容器高度一样

5、align-content

设置轴线的对齐方式（轴线当做元素）
除了能把元素作为对齐方式排列
也可以把容器内的轴线做为对齐方式的排列

前提是定义多根轴线，多行
当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐

flex-direction为column

flex-start

向左对齐

flex-end

向右对齐

center

居中

strech

当宽度width没有设置的时候，轴线可以被拉伸

space-between

两端对齐，元素之间的空白等比切分

space-around

轴线两边的空白等比切分

容器内元素的属性

1、order

用于设置flex容器内部每个元素的排列顺序，默认值是0
排序规则由小到大

    .green{
        background-color: green;
        order: 3;
    }
    .red{
        background-color: red;
        order: 2;
    }
    .blue{
        background-color: blue;
        order: 1;
    }

2、flex-grow

用于设置元素放大比例，默认值是0，为0则不放大
前提是有空间

    .green{
        background-color: green;
        /* order: 3; */
        flex-grow: 1;
    }
    .red{
        background-color: red;
        /* order: 2; */
        flex-grow: 2;
    }
    .blue{
        background-color: blue;
        /* order: 1; */
        flex-grow: 1;
    }

3、flex-shrink

用于设置元素缩放比例，默认值是0，为0则不缩小
写负值是没有效果的
前提是当前轴线元素撑满了

.green{
        background-color: green;
        /* order: 3; */
        /* flex-grow: 1; */
        flex-shrink: 0;
    }

4、flex-basis

设置元素固定或自动空间的占比
不需要有前提条件就可以设置元素的空间占比，可以放大，可以缩小

    .green{
        background-color: green;
        /* order: 3; */
        /* flex-grow: 1; */
        flex-shrink: 0;
        flex-basis: 300rpx;
    }

5、align-self

重写align-items父属性
重写容器中元素在交叉轴上的对齐方式

默认是auto，表示继承父级元素的align-item属性

    .red{
        background-color: red;
        align-self: flex-start;
    }

flex-start

在交叉轴上向起点位置（向上/向左）对齐

flex-end

在交叉轴上向结束位置（向下/向右）对齐

center

居中对齐

baseline

基准线，如果元素里有文字，会把文字作为基础线排成一行

stretch

如果没有对元素设置高度，那么在交叉轴上会形成拉伸
此时会把元素高度拉到和外部容器高度一样