CSS3 flex布局也就是弹性盒子布局，是CSS3新增的一种布局模式，主要用来实现容器内子元素的灵活排列和对齐，相比传统浮动、定位布局，它能更简单地处理不同屏幕尺寸下的元素适配问题，减少很多额外的样式代码。
flex布局的基本概念
使用flex布局的元素叫做flex容器，它的所有直接子元素会自动成为flex项目。开启flex布局只需要在容器元素上设置display: flex或者display: inline-flex，前者会让容器本身表现为块级元素，后者表现为行内元素。
flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列，我们可以通过相关属性控制项目在主轴和交叉轴上的对齐、排序、缩放等行为。
flex容器的核心属性
1. flex-direction
该属性用来设置主轴的方向，也就是项目的排列方向，可选值如下：
- row：默认值，主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
/* 设置容器为垂直方向排列项目 */
.container {
display: flex;
flex-direction: column;
}
2. justify-content
该属性定义项目在主轴上的对齐方式，可选值如下：
- flex-start：默认值，项目左对齐（主轴水平时）
- flex-end：项目右对齐（主轴水平时）
- center：项目居中对齐
- space-between：项目两端对齐，项目之间的间隔相等
- space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍
- space-evenly：项目之间、项目与容器边框之间的间隔完全相等
/* 主轴水平时项目居中对齐 */
.container {
display: flex;
justify-content: center;
}
3. align-items
该属性定义项目在交叉轴上的对齐方式，可选值如下：
- stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
- flex-start：交叉轴起点对齐
- flex-end：交叉轴终点对齐
- center：交叉轴居中对齐
- baseline：项目的第一行文字的基线对齐
/* 交叉轴居中对齐 */
.container {
display: flex;
align-items: center;
}
4. flex-wrap
默认情况下，项目都排在一条轴线上，该属性定义如果一条轴线排不下，是否换行，可选值如下：
- nowrap：默认值，不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
/* 容器空间不足时项目换行 */
.container {
display: flex;
flex-wrap: wrap;
}
5. flex-flow
该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
/* 简写形式，主轴垂直，换行 */
.container {
display: flex;
flex-flow: column wrap;
}
6. align-content
该属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用，可选值和justify-content类似：
- flex-start：与交叉轴起点对齐
- flex-end：与交叉轴终点对齐
- center：与交叉轴中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔相等
- stretch：默认值，轴线占满整个交叉轴
/* 多行项目在交叉轴均匀分布 */
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
flex项目的核心属性
1. order
该属性定义项目的排列顺序，数值越小排列越靠前，默认为0，可以是负值。
/* 第二个项目排列到最前面 */
.item:nth-child(2) {
order: -1;
}
2. flex-grow
该属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间；如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
/* 第一个项目占据两倍剩余空间 */
.item:first-child {
flex-grow: 2;
}
.item:not(:first-child) {
flex-grow: 1;
}
3. flex-shrink
该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小；如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时前者不缩小。
/* 第一个项目空间不足时不缩小 */
.item:first-child {
flex-shrink: 0;
}
4. flex-basis
该属性定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值，比如350px，则项目将占据固定空间。
/* 项目主轴方向固定占据200px空间 */
.item {
flex-basis: 200px;
}
5. flex
该属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性可选。该属性有两个快捷值：auto等价于1 1 auto，none等价于0 0 auto。
/* 项目自动放大缩小，初始大小自适应 */
.item {
flex: auto;
}
/* 项目不放大不缩小 */
.item-fixed {
flex: none;
}
6. align-self
该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch。可选值和align-items完全一致。
/* 第三个项目单独设置交叉轴底部对齐 */
.item:nth-child(3) {
align-self: flex-end;
}
flex布局常见使用场景
flex布局非常适合做以下场景的布局：
- 水平垂直居中：容器设置
justify-content: center和align-items: center即可实现子元素水平垂直居中，比传统定位方式简单很多 - 导航栏布局：导航项用flex排列，设置
justify-content: space-between可以轻松实现两端对齐的导航效果 - 等分布局：项目设置
flex: 1即可实现多个项目等分容器空间 - 自适应卡片列表：容器设置
flex-wrap: wrap，项目设置固定flex-basis，即可实现不同屏幕尺寸下自动换行的卡片列表
/* 水平垂直居中示例 */
.center-box {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 300px;
background-color: #f5f5f5;
}
.center-content {
width: 200px;
height: 100px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 100px;
}
<div class="center-box">
<div class="center-content">居中内容</div>
</div>
使用flex布局的注意事项
1. flex布局下，项目的float、clear和vertical-align属性会失效，不需要再使用这些属性控制布局。
2. 部分旧版本浏览器对flex布局的支持度有限，如果需要兼容旧版浏览器，可能需要添加对应的前缀，比如-webkit-flex。
3. 设置flex: 1的时候，实际上是设置了flex-grow:1; flex-shrink:1; flex-basis:0%，需要注意flex-basis为0%时，项目的大小会完全由flex-grow分配，和设置flex: auto的行为有区别。
flex布局是目前前端开发中最常用的布局方案之一，掌握它的核心属性之后，能大幅减少布局相关的代码量，提升页面适配的效率，建议开发者多结合实际场景练习，加深对不同属性效果的理解。
CSS3flex布局flex_containerflex_item弹性盒子修改时间：2026-07-13 22:54:39