本文基于 MDN 弹性盒子教程，系统拆解 Flexbox 布局的核心概念和常用属性。内容涵盖 flex 容器的创建方式、主轴与交叉轴的轴向控制、换行行为的触发条件、flex 属性对空间分配的弹性比例机制、主轴与交叉轴上的对齐策略、order 属性对视觉顺序的独立控制，以及 flex 嵌套形成复杂布局的方法。每个知识点均配有代码示例和渲染逻辑分析。
1. display: flex 与 flex 容器的创建
弹性盒子的起点是将一个元素声明为 flex 容器。这个操作通过设置 display 属性完成，直接影响其直接子元素的布局行为。
先看一个最基础的示例，HTML 结构包含一个 section 和三个 article：
html
<section>
<article>文章一</article>
<article>文章二</article>
<article>文章三</article>
</section>对应的 CSS 只需要一行声明：
css
section {
display: flex;
}这行代码将 section 转变为 flex 容器，其直接子元素 article 自动成为 flex 项。从渲染结果可以观察到三个明显变化：
- 三个
article默认横向排列成一行，不再像块级元素那样各占一行 - 每个
article的高度自动相等，以最高的那个为准 article的宽度不再默认撑满父容器，而是根据内容自动调整
这些默认行为的背后是 flex 容器强加给子元素的一套新布局规则。flex 容器本身在外部仍表现为块级元素，但内部布局模型从文档流切换为弹性布局。flex 项不再服从块级元素的垂直堆叠规则，而是沿着主轴方向依次排列。
如果希望容器本身表现为行内元素，可以使用 display: inline-flex。这个值与 inline-block 的行为类似，容器本身不换行，与其他行内元素共享一行空间，但内部子元素仍然按照弹性盒子的规则布局。
2. 主轴与交叉轴的轴向控制
flex 布局的核心概念是两条轴：主轴 和交叉轴。主轴是 flex 项排列的方向，交叉轴是与主轴垂直的方向。
默认情况下，主轴是水平方向 ，从左到右延伸，flex 项默认横向排列。交叉轴则是垂直方向，从上到下延伸。
通过 flex-direction 属性可以改变主轴方向：
css
section {
display: flex;
flex-direction: column;
}将 flex-direction 设置为 column 后，主轴从水平变为垂直，flex 项改为纵向堆叠，外观上恢复了块级元素的排列方式，但 flex 容器的其他特性（如对齐能力、弹性伸缩）仍然保留。交叉轴也随之旋转为水平方向。
flex-direction 取值表
| 取值 | 主轴方向 | 排列方向 |
|---|---|---|
row |
水平 | 从左到右（默认） |
row-reverse |
水平 | 从右到左，顺序反转 |
column |
垂直 | 从上到下 |
column-reverse |
垂直 | 从下到上 |
反向值不仅改变排列方向，还会交换主轴起始端和结束端的位置，影响后续对齐属性中 start 和 end 的对应方向。交叉轴的方向始终跟随主轴变化，两条轴的起始端和结束端也会随 flex-direction 的取值和书写模式动态调整。
3. flex-wrap 的换行控制与溢出处理
当 flex 项的总宽度（或高度）超过容器可用空间时，默认行为是强制收缩所有 flex 项以保持单行排列，但某些情况下收缩会导致内容严重变形。这时需要启用换行功能。
观察一个包含 8 个定宽 flex 项的示例：
css
section {
display: flex;
}
article {
flex: 200px;
}浏览器会尽可能将所有 article 塞进一行，如果容器宽度不够，flex 项会被压缩到小于 200 像素，甚至内容溢出。
添加 flex-wrap: wrap 可以改变这个行为：
css
section {
display: flex;
flex-wrap: wrap;
}启用换行后，当一行放不下所有 flex 项时，溢出的项会移动到下一行。每行容纳尽可能多的项，剩余空间会在该行内分配。换行后的多行布局中，每一行独立计算空间分配，不同行的 flex 项不会相互影响。
flex-wrap 取值表
| 取值 | 行为 |
|---|---|
nowrap |
始终单行，强制收缩（默认） |
wrap |
启用换行，溢出项向下移动 |
wrap-reverse |
启用换行，换行方向反转，溢出项向上移动 |
在 flex 容器中，flex-direction 和 flex-wrap 可以合并为 flex-flow 缩写属性：
css
section {
flex-flow: row wrap;
}第一个值对应 flex-direction，第二个值对应 flex-wrap。在需要同时设置轴向和换行时，使用缩写可以减少代码量。
4. flex 弹性比例的三值缩写与空间分配规则
flex 属性是弹性盒子中最核心的尺寸控制机制，它决定 flex 项如何分配容器的剩余空间或收缩以适应不足空间。
最基本的用法是给每个 flex 项设置一个无单位的比例值：
css
article {
flex: 1;
}这表示将所有 flex 项的单位比例设为相等。浏览器计算步骤是：先扣除所有 flex 项的基础内容和边距所占空间，将剩余空间按比例值总和等分，每份分配给对应比例值的 flex 项。比例值为 1 意味着每个 article 获得相同份额的剩余空间。
当需要某个 flex 项占据更多空间时，调整其比例值：
css
article:nth-of-type(3) {
flex: 2;
}此时比例总和变为 4（1 + 1 + 2），前两个 article 各得四分之一，第三个 article 得四分之二即一半。这里的 2 和 1 只代表相对比例，设置 400000 和 200000 的效果完全等价，因为比例关系未变。
flex 的三值缩写
flex 属性实际上是三个独立属性的缩写：flex-grow、flex-shrink 和 flex-basis。完整的写法是：
css
article {
flex: 1 200px;
}| 值 | 对应属性 | 含义 |
|---|---|---|
| 第一个值（1） | flex-grow |
增长比例 |
| 第二个值（省略，默认 1） | flex-shrink |
收缩比例 |
| 第三个值（200px） | flex-basis |
基础尺寸 |
这行声明的含义是：每个 flex 项的基础大小为 200 像素，如果容器有额外空间，按 1:1:1 的比例分配增长。未显式指定的中间值 flex-shrink 默认为 1，表示在空间不足时所有项等比例收缩。
计算示例 ：当容器宽度为 900 像素，容纳三个这样的 article 时，先扣除三个 200 像素的基础尺寸共 600 像素，剩余 300 像素按比例分给三个 article，每个再获得 100 像素，最终各为 300 像素宽。如果容器宽度只有 500 像素，则从 600 像素基础尺寸中需减去 100 像素的缺口，每个 article 各收缩约 33 像素。
这种先分配基础尺寸再按比例分割增减空间的机制，使得 flex 布局在响应式场景中表现优异，无论容器变大还是缩小，flex 项都能按预设规则自适应。
5. 主轴与交叉轴上的对齐策略
flex 容器提供了两类对齐属性：控制主轴方向的 justify-content 和控制交叉轴方向的 align-items。
一个按钮工具栏的典型示例展示了对齐属性的实际效果：
html
<div>
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button>Blush</button>
</div>
css
div {
display: flex;
align-items: center;
justify-content: space-around;
}align-items：交叉轴对齐
align-items 决定所有 flex 项在交叉轴上的位置：
| 取值 | 行为 |
|---|---|
stretch |
flex 项被拉伸以填满交叉轴高度（默认） |
center |
保持原始高度，在交叉轴居中放置 |
flex-start |
对齐到交叉轴起始端 |
flex-end |
对齐到交叉轴结束端 |
stretch 是之前示例中 article 自动等高的原因。center 实现垂直居中效果，是日常开发中最常用的取值之一。
align-self：单个项的交叉轴覆盖
如果需要某个 flex 项脱离统一的交叉轴对齐，可以使用 align-self 针对单个项覆盖容器设置：
css
button:first-child {
align-self: flex-end;
}第一个按钮单独对齐到交叉轴结束端，其余按钮仍按容器的 align-items 设置居中。这种个别覆盖机制在需要某个元素特殊定位时非常实用。
justify-content：主轴分布
justify-content 控制 flex 项在主轴上的分布方式：
| 取值 | 行为 |
|---|---|
flex-start |
所有项聚集在主轴起始端（默认） |
flex-end |
聚集在主轴结束端 |
center |
聚集在中间 |
space-around |
每项两侧分配相等间距，首尾各留一半 |
space-between |
首尾项紧贴容器两端，中间间距均匀分配 |
space-evenly |
所有间距完全相等，包括首尾与容器边缘 |
选型建议 ：导航栏通常用 space-between 将 logo 和菜单项分置两端；按钮组常用 space-around 或 space-evenly 保持视觉均衡。
6. order 属性与视觉顺序的独立性
flex 布局允许在不修改 HTML 源码顺序的情况下改变 flex 项的视觉排列顺序，这是传统布局难以实现的能力。
默认所有 flex 项的 order 值为 0。通过设置不同的整数值可以调整显示顺序：
css
button:first-child {
order: 1;
}浏览器按照 order 值从小到大排列 flex 项。未设置 order 的按钮保持默认值 0，排在前半部分；设置了 order: 1 的 Smile 按钮被推到末尾。order 值的绝对值大小不重要，相对大小决定顺序。
order 可以为负值，让元素排到默认顺序之前：
css
button:last-child {
order: -1;
}order: -1 小于 0，因此 Blush 按钮排到所有默认 order 值的按钮前面，成为视觉顺序上的第一个。
当多个 flex 项具有相同的 order 值时，它们之间按照 HTML 源码中的出现顺序排列。这一规则确保了即使使用 order 重排，同组元素内部仍保持预期的相对位置。
可访问性注意
order 属性只改变视觉渲染顺序 ，不影响文档的语义结构、Tab 键导航顺序和屏幕阅读器的朗读顺序。因此不应依赖 order 来实现对可访问性有影响的布局调整，它的适用场景主要是响应式设计中的列序调整和视觉优化。
7. flex 嵌套构建复杂布局
flex 容器的直接子元素是 flex 项，但这个 flex 项自身也可以同时设置为 flex 容器，形成嵌套的弹性布局结构。
考虑一个三层嵌套的布局示例，section 包含三个 article，其中第三个 article 内部又包含多个 div 和按钮：
css
section {
display: flex;
}
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 3 200px;
display: flex;
flex-flow: column;
}外层 flex 容器 section 让三个 article 横向排列。第三个 article 通过 flex: 3 200px 获得三倍于前两个的宽度分配。同时它自身设置 display: flex 成为内层 flex 容器，flex-flow: column 让它的直接子元素 div 纵向排列。
进入第三层，对 article 内部的第一个 div 继续嵌套 flex：
css
article:nth-of-type(3) div:first-child {
flex: 1 100px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}这个 div 既是外层 article 的 flex 项，又是内层按钮组的 flex 容器。它占据 article 中的一份弹性空间，同时将内部按钮按行排列并启用换行，按钮居中分布。
最内层的按钮设置 flex: 1，在 div 的宽度内等分空间：
css
button {
flex: 1;
margin: 5px;
}当 div 足够宽时按钮在一行内均匀分布，当宽度缩小时超出宽度的按钮自动换到下一行。这种嵌套 flex 的布局方式能够从整体到局部逐层控制空间分配，外层管理大区块的排列比例，内层管理细节元素的分布对齐，整棵布局树的规则清晰且易于维护。
总结
本文系统拆解了 Flexbox 布局的 7 个核心知识点：
| 知识点 | 核心属性 | 作用 |
|---|---|---|
| 容器创建 | display: flex / inline-flex |
将元素声明为 flex 容器 |
| 轴向控制 | flex-direction |
控制主轴方向（row/column/reverse） |
| 换行控制 | flex-wrap / flex-flow |
控制溢出项的换行行为 |
| 弹性比例 | flex（grow/shrink/basis） |
控制空间分配的自适应规则 |
| 对齐策略 | justify-content / align-items / align-self |
控制主轴和交叉轴上的分布与对齐 |
| 视觉顺序 | order |
独立于源码顺序调整 flex 项的显示顺序 |
| 嵌套布局 | 容器即项、项即容器 | 逐层构建复杂的弹性布局结构 |
Flexbox 提供了一套完整的一维布局解决方案，通过主轴/交叉轴的清晰分离、弹性比例的自动分配、以及对齐属性的精细控制，能够高效应对绝大多数横向或纵向的排列需求。配合嵌套使用，更能构建出层次分明、规则一致的复杂页面结构。
还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！