你有没有遇到过这样的烦恼？
想让几个盒子并排显示，又不想它们把后面的元素挤下去；
想让它们自动填满父容器，结果发现 inline-block 多了一个神秘的"空隙"；
想做响应式布局，却发现要写一堆 float 和 position......
别急！今天我们要介绍的这位"布局界超人"------Flexbox（弹性布局） ，它将彻底改变你对 CSS 布局的认知！
从"文档流"说起：网页是怎么排队的？
在 HTML 中，每个元素都像水一样，顺着页面流动。这种默认的排列方式叫 文档流（Document Flow） 。
- 块级元素（block） ：比如
<div>、<p>，天生霸道，独占一行，兄弟们只能乖乖站它下面。但可以可以设置宽高 - 行内元素（inline） ：比如
<span>、<a>，很随和，可以和其他元素肩并肩站成一排，但不能设置宽高。 - 行内块元素（inline-block） ：两者的结合体，既能同行又能设宽高，看似完美，却有个"臭毛病"------换行符会产生空白间隙！
ini
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>哪怕你设置了 width: 33.33%，这三个元素也很难完美地三等分一行，因为中间多了看不见的"空格"。
css
.item {
flex: 1;
font-size: 20px;
color:black;
display: inline-block;
width: 33.33%;
}Flexbox：是时候升级你的布局武器库了！
这时候，display: flex 就闪亮登场了！它就像给父容器装上了一套"智能弹簧系统"，子元素可以根据空间自动伸缩、对齐、换行。
我们的完整 HTML 结构
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
display: flex;
background-color: green;
height: 100px;
width: 50%;
margin-bottom: 10px;
}
/* 表示第二个盒子 */
.box:nth-child(2) {
background-color: blue;
}
.item {
flex: 1;
font-size: 20px;
color:black;
display: inline-block;
/* width: 33.33%; */
}
.item:nth-child(odd) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div><div class="box"></div>
</body>
</html>我们有两个 .box 容器，第一个里面有三个 .item 子项。
关键属性解析
1️⃣ display: flex;
这是开启弹性布局的"开关"！
css
.box {
display: flex;
}一旦设置了这个，.box 就变成了一个弹性容器（Flex Container） ，它的所有直接子元素（.item）自动成为弹性项目（Flex Items） ，并排成一行（默认方向）。
2️⃣ flex: 1;
这是弹性布局的灵魂指令！
css
.item {
flex: 1;
}flex: 1 是 flex-grow: 1, flex-shrink: 1, flex-basis: 0% 的简写。
简单理解就是： "有福同享，有难同当" ------ 所有子项平分父容器的可用空间。
如果你把某个 item 设置为 flex: 2，那它就会占据双倍的空间！
3️⃣ 其他辅助样式
background-color,height,width: 控制外观和尺寸。margin-bottom: 给每个.box下方留点呼吸空间。:nth-child(odd): 选中奇数位置的 item，比如第1、3个，用黄色背景突出显示。
实际效果演示
| 属性 | 作用 |
|---|---|
display: flex |
开启弹性布局，子元素横向排列 |
flex: 1 |
子元素平均分配剩余空间 |
height: 100px |
固定高度 |
width: 50% |
父容器占屏幕一半宽度 |
最终效果：
- 三个数字
1,2,3在绿色盒子中完美等分，没有缝隙！ - 蓝色盒子虽然为空，但也占位显示。
- 整个布局简洁、响应式、无需计算像素！
更多 Flex 专属属性：掌控布局的"方向盘"
Flexbox 不只是让元素排成一行那么简单，它还提供了一整套"布局控制系统"，让你像指挥家一样精准调度每一个子元素的位置与空间。
1️⃣flex-direction：决定排列方向
默认情况下，弹性项目是从左到右横向排列 的（row），但你可以轻松改变方向！
css
.box {
display: flex;
flex-direction: row; /* 横向（默认）→ */
flex-direction: column; /* 纵向 ↓ */
flex-direction: row-reverse; /* 反向横向 ← */
flex-direction: column-reverse; /* 反向纵向 ↑ */
}适用场景：移动端常见垂直布局（如导航栏在上，内容在下），用
column一行搞定！
2️⃣justify-content：控制主轴对齐（水平方向）
这个属性用来设置主轴方向上的对齐方式。主轴默认是水平方向（x轴）。
css
.box {
justify-content: flex-start; /* 默认，靠左对齐 */
justify-content: center; /* 居中对齐 */
justify-content: flex-end; /* 靠右对齐 */
justify-content: space-between; /* 两端对齐，中间等距 */
justify-content: space-around; /* 均匀分布，两边留白 */
justify-content: space-evenly; /* 完全均匀分布 */
}🌰 举个栗子：想做一个两端有图标、中间标题居中 的导航栏？
space-between+center轻松实现！
3️⃣align-items：控制交叉轴对齐（垂直方向）
如果主轴是横的，那交叉轴就是竖的。align-items 控制子元素在交叉轴上的对齐方式。
css
.box {
align-items: stretch; /* 默认，拉伸填满容器高度 */
align-items: flex-start; /* 顶部对齐 */
align-items: center; /* 垂直居中 */
align-items: flex-end; /* 底部对齐 */
align-items: baseline; /* 文本基线对齐 */
}实战技巧：让一个 div 在父容器中真正垂直居中 ？再也不用
margin: auto或transform了，align-items: center一行解决！
4️⃣主轴 vs 交叉轴：理解 Flex 的"坐标系"
| 情况 | 主轴（justify-content） | 交叉轴（align-items） |
|---|---|---|
flex-direction: row |
水平方向 ←→ | 垂直方向 ↑↓ |
flex-direction: column |
垂直方向 ↑↓ | 水平方向 ←→ |
记住：
justify-content总是对主轴起作用。align-items总是对交叉轴起作用。
方向一变，它的"职责"也随之切换！
5️⃣子元素的 flex: 1 再深入
我们之前说 flex: 1 是"平分空间"，其实它背后有三位"幕后功臣"：
css
flex: 1; /* 等价于 */
flex-grow: 1; /* 空间多余时，是否放大（1=可放大）*/
flex-shrink: 1; /* 空间不足时，是否缩小（1=可缩小）*/
flex-basis: 0%; /* 基准大小（0% 表示先按比例分空间，再分配内容）*/高级用法：
css.item:nth-child(2) { flex: 2; /* 占两份空间 */ }这样，第二个 item 的宽度就是其他 item 的两倍！
6️⃣Flex 布局核心口诀
父元素定方向，子元素分空间；
主轴看justify，侧轴靠align；
想平均分配？flex: 1最简单！
7️⃣实战小贴士
- 父容器加
display: flex - 子元素用
flex: n控制占比 - 使用
justify-content控制主轴对齐（如 space-between） - 使用
align-items控制交叉轴对齐（如居中）
例如：
css
.box {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}Flex vs Inline-Block：谁才是真正的王者？
| 特性 | inline-block |
flex |
|---|---|---|
| 是否可设宽高 | ✅ 是 | ✅ 是 |
| 是否同行 | ✅ 是 | ✅ 是 |
| 白色间隙问题 | ❌ 有 | ✅ 无 |
| 居中对齐难度 | 难（需 line-height 或 transform） | 易（justify-content / align-items） |
| 响应式支持 | 一般 | 强大 |
| 学习成本 | 低 | 中等 |
👉 结论：Flexbox 更强大、更现代、更适合复杂布局！
结语：Flexbox，你的网页"变形金刚"已上线！
如果你还在为对不齐的盒子抓狂，还在和浮动、定位斗智斗勇，那么这篇文章一定对你有用！
我们的CSS超级英雄------Flexbox ，它不像传统布局那样死板，而像一支训练有素的仪仗队：一声"display: flex"，立刻列队整齐；一句"flex: 1"，马上平均站位；想居中？justify-content 和 align-items 一个手势就搞定！
无论是手机上的小屏导航，还是桌面端的复杂卡片墙，Flexbox 都能优雅应对，丝滑如风。
所以记住这句前端"黑话"：
"遇事不决，先 flex！"
当你再次面对布局难题时，别再苦思冥想，只需轻轻写下那四个字母------
f-l-e-x，奇迹，就在一行代码之间！