flex布局即弹性盒子布局，是CSS3引入的一种一维布局模型，通过给容器设置display:flex属性，即可让容器内的子元素按照弹性规则排列，不需要再依赖浮动、清除浮动等复杂的传统布局操作。
flex布局的基本概念
使用flex布局的元素称为flex容器，其所有直接子元素自动成为flex项目。flex布局默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），项目的排列方向默认沿主轴从左到右排列。
开启flex布局
只需要给父容器设置display属性为flex或者inline-flex即可开启flex布局，两者的区别是flex容器会占满整行，inline-flex容器会根据内容自适应宽度。
/* 块级flex容器 */
.container {
display: flex;
}
/* 行内flex容器 */
.inline-container {
display: inline-flex;
}
flex容器的核心属性
flex容器的属性用于控制所有子项目的整体排列方式，常用的有以下6个核心属性。
flex-direction 主轴方向
该属性用于设置主轴的方向，也就是项目的排列方向，默认值为row。
| 属性值 | 说明 |
|---|---|
| row | 默认值，主轴为水平方向，起点在左端，项目从左到右排列 |
| row-reverse | 主轴为水平方向，起点在右端，项目从右到左排列 |
| column | 主轴为垂直方向，起点在上沿，项目从上到下排列 |
| column-reverse | 主轴为垂直方向，起点在下沿，项目从下到上排列 |
.container {
display: flex;
/* 设置主轴为垂直方向，项目从上到下排列 */
flex-direction: column;
}
justify-content 主轴对齐方式
该属性用于定义项目在主轴上的对齐方式，默认值为flex-start。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，项目向主轴起点对齐 |
| flex-end | 项目向主轴终点对齐 |
| center | 项目在主轴上居中对齐 |
| space-between | 项目两端对齐，项目之间的间隔相等 |
| space-around | 每个项目两侧的间隔相等，项目之间的间隔比项目与容器边缘的间隔大一倍 |
| space-evenly | 项目之间、项目与容器边缘的间隔完全相等 |
.container {
display: flex;
/* 项目在主轴上居中对齐 */
justify-content: center;
}
align-items 交叉轴对齐方式
该属性用于定义项目在交叉轴上的对齐方式，默认值为stretch。
| 属性值 | 说明 |
|---|---|
| stretch | 默认值，如果项目未设置高度或高度为auto，项目将占满整个交叉轴的高度 |
| flex-start | 项目向交叉轴起点对齐 |
| flex-end | 项目向交叉轴终点对齐 |
| center | 项目在交叉轴上居中对齐 |
| baseline | 项目按照其第一行文字的基线对齐 |
.container {
display: flex;
/* 项目在交叉轴上居中对齐 */
align-items: center;
/* 设置容器高度，方便观察交叉轴对齐效果 */
height: 200px;
}
flex-wrap 换行规则
默认情况下flex项目都会排在主轴线上，该属性用于设置当项目超出容器宽度时是否换行，默认值为nowrap。
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行，项目会被压缩宽度以适应容器 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
.container {
display: flex;
/* 项目超出容器宽度时换行 */
flex-wrap: wrap;
}
flex-flow 复合属性
该属性是flex-direction和flex-wrap的复合属性，默认值为row nowrap，两个属性值之间用空格分隔。
.container {
display: flex;
/* 等价于 flex-direction: column; flex-wrap: wrap; */
flex-flow: column wrap;
}
align-content 多行对齐方式
该属性用于定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用，默认值为stretch，属性值和justify-content类似。
| 属性值 | 说明 |
|---|---|
| stretch | 默认值，轴线占满整个交叉轴 |
| flex-start | 与交叉轴起点对齐 |
| flex-end | 与交叉轴终点对齐 |
| center | 与交叉轴中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等 |
.container {
display: flex;
flex-wrap: wrap;
/* 多行内容在交叉轴上居中对齐 */
align-content: center;
height: 300px;
}
flex项目的核心属性
flex项目的属性用于控制单个子元素的缩放、排序等特性，常用的有以下6个核心属性。
order 排列顺序
该属性用于定义项目的排列顺序，数值越小排列越靠前，默认值为0，可以是负整数。
<div class="container">
<div class="item" style="order: 3">项目1</div>
<div class="item" style="order: 1">项目2</div>
<div class="item" style="order: 2">项目3</div>
</div>
上述代码中项目2的order值最小，会排列在最前面，其次是项目3，最后是项目1。
flex-grow 放大比例
该属性用于定义项目的放大比例，默认值为0，即如果存在剩余空间也不放大。如果所有项目的flex-grow都为1，则它们会等分剩余空间；如果一个项目的flex-grow为2，其他为1，则前者占据的剩余空间是其他项目的2倍。
.item {
/* 所有项目等分剩余空间 */
flex-grow: 1;
}
.item-special {
/* 该项目的放大比例是其他项目的2倍 */
flex-grow: 2;
}
flex-shrink 缩小比例
该属性用于定义项目的缩小比例，默认值为1，即如果空间不足，项目会缩小。如果所有项目的flex-shrink都为1，当空间不足时所有项目等比例缩小；如果一个项目的flex-shrink为0，其他为1，则空间不足时前者不缩小。
.item {
/* 空间不足时所有项目等比例缩小 */
flex-shrink: 1;
}
.item-no-shrink {
/* 空间不足时该项目不缩小 */
flex-shrink: 0;
}
flex-basis 初始大小
该属性用于定义项目在分配多余空间之前占据的主轴空间，默认值为auto，即项目的本来大小。可以设置为固定的像素值，比如200px，项目将占据固定大小的主轴空间。
.item {
/* 项目初始占据200px的主轴空间 */
flex-basis: 200px;
}
flex 复合属性
该属性是flex-grow、flex-shrink、flex-basis的复合属性，默认值为0 1 auto，后两个属性可选。该属性有两个快捷值：auto等价于1 1 auto，none等价于0 0 auto。
.item {
/* 等价于 flex-grow:1; flex-shrink:1; flex-basis:0%; */
flex: 1;
}
.item-fixed {
/* 项目不放大不缩小，保持本身大小 */
flex: none;
}
align-self 单个项目对齐方式
该属性用于设置单个项目在交叉轴上的对齐方式，可以覆盖容器的align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch。属性值和align-items一致。
.container {
display: flex;
align-items: center;
}
.item-special {
/* 该单个项目在交叉轴上向起点对齐，覆盖容器的center设置 */
align-self: flex-start;
}
flex布局使用示例
下面是一个常见的居中布局示例，只需要给容器设置flex相关属性即可实现子元素水平和垂直居中，不需要使用传统的margin负值或者定位技巧。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>flex居中示例</title>
<style>
.container {
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
width: 100vw;
height: 100vh;
background-color: #f0f0f0;
}
.content {
width: 200px;
height: 200px;
background-color: #409eff;
color: white;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">居中内容</div>
</div>
</body>
</html>
flex布局flex_containerflex_itemjustify_contentalign_items修改时间：2026-06-14 18:51:28