Flex布局
七崽爱吃小饼干2026/02/28阅读 1
一、Flex 布局核心概念
Flex 布局的本质是：给容器设置 display: flex 后，容器内部的项目会按照弹性规则排列，告别传统的 float、position 布局的痛点（如垂直居中难、自适应分配空间复杂）。
先明确两个核心角色：
- Flex 容器（flex container）：设置了
display: flex或display: inline-flex的元素（父元素）。 - Flex 项目（flex item）：容器的直接子元素（子元素），会自动成为弹性项目。
布局的核心轴线：
- 主轴（main axis）：项目默认沿主轴排列（默认水平向右）。
- 交叉轴（cross axis）：垂直于主轴的轴线（默认垂直向下）。
二、Flex 容器属性（控制项目整体排列）
容器是“指挥者”，以下 6 个属性是控制布局的核心，全部作用在容器上：
| 属性 | 作用 | 常用值 | 说明 |
|---|---|---|---|
flex-direction | 定义主轴方向 | row（默认）/ row-reverse / column / column-reverse | 决定项目是水平/垂直排列，正序/倒序 |
flex-wrap | 定义项目是否换行 | nowrap（默认）/ wrap / wrap-reverse | 默认所有项目挤在一行，wrap 会自动换行 |
flex-flow | flex-direction + flex-wrap 的简写 | row wrap（示例） | 简化代码，如 flex-flow: column nowrap |
justify-content | 主轴上的对齐方式 | flex-start（默认）/ center / flex-end / space-between / space-around / space-evenly | 核心属性，实现水平/垂直居中、两端对齐等 |
align-items | 交叉轴上的单行对齐方式 | stretch（默认）/ center / flex-start / flex-end / baseline | 控制单行项目在交叉轴的对齐（如垂直居中） |
align-content | 交叉轴上的多行对齐方式 | stretch（默认）/ center / flex-start / flex-end / space-between / space-around | 仅当项目换行时生效，控制多行整体的对齐 |
关键属性示例（最常用）
css
/* 容器样式 */
.flex-container {
width: 400px;
height: 300px;
border: 1px solid #ccc;
display: flex; /* 核心：开启flex布局 */
/* 1. 主轴方向：垂直排列 */
flex-direction: column;
/* 2. 项目换行 */
flex-wrap: wrap;
/* 3. 主轴居中（垂直居中，因为主轴是column） */
justify-content: center;
/* 4. 交叉轴居中（水平居中） */
align-items: center;
}
/* 项目样式 */
.flex-item {
width: 80px;
height: 80px;
background: #f00;
margin: 5px;
}
三、Flex 项目属性（控制单个项目）
项目是“执行者”，以下 5 个属性作用在单个项目上，控制其自身的布局行为：
| 属性 | 作用 | 常用值 | 说明 |
|---|---|---|---|
order | 定义项目排列顺序 | 数字（默认 0） | 数值越小，排列越靠前（可设负数） |
flex-grow | 定义项目的放大比例 | 数字（默认 0） | 剩余空间分配权重，0 表示不放大 |
flex-shrink | 定义项目的缩小比例 | 数字（默认 1） | 空间不足时的缩小权重，0 表示不缩小 |
flex-basis | 定义项目的基准宽度/高度 | auto（默认）/ 具体数值（如 100px） | 分配空间前项目的默认大小 |
align-self | 单个项目的交叉轴对齐方式 | auto（默认）/ center / flex-start 等 | 覆盖容器的 align-items，单独控制某项目 |
关键属性示例（最常用）
css
/* 容器 */
.container {
display: flex;
width: 400px;
height: 200px;
border: 1px solid #ccc;
}
/* 项目1：不放大、不缩小，基准宽度80px */
.item1 {
flex: 0 0 80px; /* flex-grow flex-shrink flex-basis 简写 */
background: #f00;
}
/* 项目2：占剩余所有空间 */
.item2 {
flex: 1; /* 等价于 flex: 1 1 auto */
background: #0f0;
}
/* 项目3：单独设置交叉轴对齐（底部） */
.item3 {
flex: 1;
align-self: flex-end;
background: #00f;
}
四、实战高频场景
场景1：水平垂直居中（最常用）
html
<div class="container">
<div class="box">我是居中的内容</div>
</div>
<style>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
}
.box {
width: 200px;
height: 200px;
background: #f00;
}
</style>
场景2：自适应布局（左侧固定，右侧自适应）
html
<div class="container">
<div class="left">左侧固定200px</div>
<div class="right">右侧自适应</div>
</div>
<style>
.container {
display: flex;
height: 500px;
}
.left {
flex: 0 0 200px; /* 不放大、不缩小、基准200px */
background: #eee;
}
.right {
flex: 1; /* 占剩余所有空间 */
background: #ddd;
}
</style>
场景3：平均分布（多列等分）
html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container {
display: flex;
width: 100%;
}
.item {
flex: 1; /* 每个项目等分空间 */
height: 100px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}
</style>
五、常见坑点
- float/clear/vertical-align 对 flex 项目无效：设置了
display: flex的容器，内部项目的 float、clear、vertical-align 会失效。 - flex: 1 不等于 width: 100%：flex: 1 是“占剩余空间”，width: 100% 是“占父容器100%宽度”，前者更灵活。
- align-content 仅在换行时生效：如果项目只有一行，
align-content不会起作用，要用align-items。
总结
- 核心逻辑：Flex 布局通过“容器+项目”的双层控制，容器管整体排列（主轴/交叉轴对齐、换行），项目管自身大小和顺序。
- 高频属性：容器端记住
justify-content（主轴对齐）、align-items（交叉轴单行对齐）；项目端记住flex: 1（自适应）、flex: 0 0 固定值（固定尺寸）。 - 核心优势：告别 float 布局的 clearfix、垂直居中难等问题，一行代码实现复杂布局，是移动端/PC端布局的首选。