flex 布局相关属性的使用

news2024/11/26 7:40:11

简单概述

为元素添加 display:flex; 的属性后，当前元素被视为弹性布局的盒子容器(box)，其子元素被视为弹性布局项目(item)。
item 会在 box 内灵活布局，解决了对齐、分布、尺寸等响应式问题。

演示 demo

<template>
    <div class="mainBox">
        <div class="box">
            <div
                v-for="(item, index) in data"
                :key="index"
                class="item"
                :style="{
                    background: item.background, height: item.height, width: item.width,
                }"
            >
                {{ item.msg }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [
                { msg: "111", background: "#3E445E", width: "100px", height: "50px", },
                { msg: "222", background: "#D0D3DA", width: "100px", height: "60px", },
                { msg: "333", background: "#505A9B", width: "100px", height: "70px", },
                { msg: "444", background: "#7394CD", width: "100px", height: "80px", },
                { msg: "555", background: "#F1E2D0", width: "100px", height: "90px", },
                { msg: "666", background: "#F6CFA3", width: "100px", height: "100px", },
                { msg: "777", background: "#E18792", width: "100px", height: "110px", },
                { msg: "888", background: "#907AC3", width: "100px", height: "120px", },
            ],
        };
    },
};
</script>
<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 100%;
}
.box {
    display: flex;
    padding: 40px;
    border: 1px solid #333;
    .item {
        color: #fff;
    }
}
</style>

下述属性演示都在以上代码的基础上进行

用于盒子容器(box)的属性

flex-direction

设置 box 内弹性 item 的方向
取值：row / row-reverse / column / column-reverse

flex-direction: row; 行模式-从左到右排列（默认值）

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-direction: row;
}

flex-direction: row-reverse; 行模式-从右到左排列

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-direction: row-reverse;
}

flex-direction: column; 列模式-从上到下排列

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-direction: column;
}

flex-direction: column-reverse; 列模式-从下到上排列

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-direction: column-reverse;
}

flex-wrap

让 box 在必要的时候换行
取值：nowrap / wrap

flex-wrap: nowrap; 不换行（默认值）

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-wrap: nowrap;
}
/* 减小 box 宽度时，item 的宽度失效，被压缩 */

flex-wrap: wrap; 换行

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    flex-wrap: wrap;
}
/* 减小 box 宽度时，item 的宽度不变，不会被压缩，自动换行 */

justify-content

设置 box 内弹性 item 的对齐分布方式
取值：flex-start / flex-end / center / space-between / space-around / space-evenly
为方便观察不同属性的对比，移除了 box 的 padding 属性

justify-content: flex-start; 起点对齐（默认值）

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: flex-start;
}

justify-content: flex-end; 结束点对齐

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: flex-end;
}

justify-content: center; 居中对齐

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: center;
}

justify-content: space-between; 两端对齐

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: space-between;
}

justify-content: space-around; 周围分布-视作 margin 效果的话，相当于每个 item 的 margin-left 和 margin-right 值相同

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: space-around;
}
/* margin-right = margin-left = (box 的宽度 - item 的宽度 * 8) / (8 * 2) */

justify-content: space-evenly; 均匀分布-视作 margin 的话，均匀分配剩余空间，每个 item 的 margin-left 值相等，最后剩下的空隙，值与 item 的 margin-left 相等

.box {
	display: flex;
    border: 1px solid #333;
    justify-content: space-evenly;
}
/* margin-right = 0 */
/* margin-left = (box 的宽度 - item 的宽度 * 8) / (8 + 1) */

align-items

设置 box 内弹性 item 的针对交叉轴的对齐分布方式
取值：flex-start / flex-end / center

align-items: flex-start; 起点对齐（默认值）

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    align-items: flex-start;
}

align-items: flex-end; 结束点对齐

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    align-items: flex-end;
}

align-items: center; 居中对齐

.box {
	display: flex;
    padding: 40px;
    border: 1px solid #333;
    align-items: center;
}

align-content

设置多轴线 box 内弹性 item 的对齐分布方式
取值：flex-start / flex-end / center / space-between / space-around / space-evenly
为方便观察不同属性的对比，移除了 box 的 padding 属性
为外层父盒子添加 flex 属性，形成多轴线的盒子

align-content: flex-start; 起点对齐

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: flex-start;
	}
}

align-content: flex-start;

align-content: flex-end; 结束点对齐

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: flex-end;
	}
}

align-content: flex-end;

align-content: center; 居中对齐

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: center;
	}
}

align-content: center;

align-content: space-between; 两端对齐

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: space-between;
	}
}

align-content: space-between;

align-content: space-around; 周围分布

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: space-around;
	}
}

align-content: space-around;

align-content: space-evenly; 均匀分布

.mainBox {
	display: flex;
	.box {
		display: flex;
	    border: 1px solid #333;
		flex-wrap: wrap;
	    align-content: space-evenly;
	}
}

align-content: space-evenly;

用于弹性项目(item)的属性

order

设置 box 内弹性 item 的排序

取值：Num，取值越小越靠前，默认为 0

.item {
    color: #fff;
    &:nth-child(1) {
        order: 4;
    }
    &:nth-child(2) {
        order: 3;
    }
    &:nth-child(3) {
        order: 0;
    }
    &:nth-child(4) { }
    &:nth-child(5) {
        order: 2;
    }
}

flex-grow

设置 box 内弹性 item 的扩展系数

取值：Num，取值越小扩展比例越小，默认为 0

.item {
    color: #fff;
    &:nth-child(1) {
        flex-grow: 1;
    }
    &:nth-child(2) {
        flex-grow: 3;
    }
    &:nth-child(3) {
        flex-grow: 1;
    }
    &:nth-child(4) { }
    &:nth-child(5) { }
}

flex-basis

设置 box 内弹性 item 的初始宽度，会覆盖原有宽度属性

取值：像素值

.item {
    color: #fff;
    &:nth-child(1) {
        flex-basis: 50px;
    }
    &:nth-child(2) {
        flex-basis: 100px;
    }
    &:nth-child(3) {
        flex-basis: 150px;
    }
    &:nth-child(4) {
    	flex-basis: 200px;
    }
    &:nth-child(5) {
        flex-basis: 250px;
    }
}

flex-shrink

设置 box 内弹性 item 的收缩系数

取值：Num，取值越小压缩比例越小，默认为 1 ，取值为 0 时，不会被压缩

.item {
    color: #fff;
    &:nth-child(1) {
        flex-shrink: 1;
    }
    &:nth-child(2) {
        flex-shrink: 2;
    }
    &:nth-child(3) {
        flex-shrink: 3;
    }
    &:nth-child(4) {
    	flex-shrink: 0;
    }
    &:nth-child(5) {
        flex-shrink: 0;
    }
}