CSS回顾-Flex弹性盒布局
弹性盒布局（Flexible Box Layout，简称 Flex）是 CSS3 中革命性的布局方案，它能以更简单的方式实现复杂的网页布局。本文用生活化比喻+代码案例，带你轻松掌握 Flex 布局的所有核心知识点。
一、Flex 布局的本质：玩具收纳箱
想象一个收纳箱（Flex 容器）里摆放着多个玩具（Flex 项目），你可以通过 2 个轴控制玩具的排列方式：
- 主轴（Main Axis）：默认水平方向（可调整）
- 交叉轴（Cross Axis）：与主轴垂直的方向
如上图所示，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
二、容器属性：控制整体布局
1. display: flex
.container {
display: flex; /* 或 inline-flex */
}
作用：声明当前元素为弹性容器，子元素自动成为弹性项目
2. flex-direction：主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
效果：
- row（默认）：水平排列 →
- row-reverse：水平反向排列 ←
- column：垂直排列 ↓
- column-reverse：垂直反向排列 ↑
3. flex-wrap：换行控制
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap（默认）：不换行（项目会压缩）
- wrap：自动换行（类似书籍排版）
- wrap-reverse：反向换行
4. flex-flow：方向+换行简写
.container {
flex-flow: column wrap; /* direction + wrap */
}
5. justify-content：主轴对齐
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
效果：
- flex-start：靠左对齐
- flex-end：靠右对齐
- center：居中
- space-between：两端对齐
- space-around：项目两侧等距
- space-evenly：间距均匀
6. align-items：交叉轴对齐（单行）
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
- stretch（默认）：拉伸填满高度
- flex-start：向上对齐
- flex-end：向下对齐
- center：居中对齐
- baseline：基线对齐（文字底部对齐）
7. align-content：交叉轴对齐（多行）
.container {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
- stretch（默认）：拉伸填满高度
- flex-start：向上对齐
- flex-end：向下对齐
- center：居中对齐
- space-between：两端对齐
- space-around：项目两侧等距
注意：仅当有多行内容时生效
三、项目属性：控制单个元素
1. order：排序优先级
.item {
order: 5; /* 默认0，数值越小越靠前 */
}
作用：通过数值控制显示顺序
2. flex-grow：放大比例
.item {
flex-grow: 2; /* 默认0（不放大） */
}
计算规则：剩余空间按比例分配
示例：三个项目分别设置 1、2、3 → 分得 1/6, 2/6, 3/6 的剩余空间
3. flex-shrink：缩小比例
.item {
flex-shrink: 3; /* 默认1（允许缩小） */
}
计算规则：空间不足时按比例缩小
4. flex-basis：初始尺寸
.item {
flex-basis: 200px | 30%; /* 默认auto */
}
优先级：比 width 更高
5. flex：综合简写
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: 1 1 200px; /* grow shrink basis */
}
常用值：
- flex: 1 → 1 1 0%
- flex: none → 0 0 auto
6. align-self：个性化对齐
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
作用：覆盖容器的 align-items 设置
四、经典布局实战
1. 水平垂直居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
2. 等宽三栏布局
.item {
flex: 1; /* 三个项目均分宽度 */
}
3. 圣杯布局
.main {
flex: 1;
}
.aside {
width: 200px;
}
4. 流式布局
.container {
flex-wrap: wrap;
}
.item {
flex: 1 0 200px; /* 最小200px，自动换行 */
}
五、Flex 布局使用口诀
主轴方向定乾坤，
换行控制要记真。
对齐方式分轴用，
项目属性更细分。
简写属性效率高，
经典布局脑中存。
六、注意事项
- 旧版浏览器需加前缀
-webkit- - 移动端优先：Flex 在移动端支持度更好
- 避免滥用：简单布局建议优先使用传统方案
七、总结
Flex 弹性盒布局通过简单的属性设置，就能实现复杂的排列效果，是现代网页设计中不可或缺的工具。掌握 Flex 布局的关键在于理解容器和项目的属性作用，以及主轴与交叉轴的关系。通过不断实践，你会发现用 Flex 布局解决布局问题变得轻而易举，网页的适配性和美观度也会大幅提升。