当前位置：首页 > news >正文

flex 布局相关属性的使用

news 2025/7/8 16:11:09

简单概述

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

演示 demo

<template><div class="mainBox"><div class="box"><divv-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;}
}