在学习移动端 Web 布局之前，我一直被各种布局方式折磨：
浮动要清除、定位要对子绝父相、行内块还有莫名其妙的空白缝隙。
直到真正开始用 Flex 布局，才意识到：
它不是“新语法”，而是一套全新的布局思维。
这篇文章是我系统学习 Flex 布局后的完整笔记，适合：
- 正在学移动端布局的同学
- 会用 flex，但不清楚原理和细节的人
- 想把 flex 用“对”、而不是“凑效果”的人
一、为什么移动端更适合 Flex 布局？
在 PC 端，我们习惯用：
- 标准流控制上下结构
- 浮动做左右布局
- 定位做局部叠加
这些方案在 移动端 会遇到明显问题：
- 屏幕尺寸变化大
- 元素比例需要自适应
- 多列布局难以维护
Flex 的出现，正是为了解决这些问题。
传统布局 vs Flex 布局
传统布局的特点：
- 兼容性好
- 布局步骤多、代码冗长
- 不适合复杂的自适应排列
Flex 布局的特点：
- 布局思路清晰
- 对齐、分配空间非常方便
- 在移动端几乎是“标配方案”
结论很明确：
- PC 端复杂页面：传统布局仍然常见
- 移动端页面：Flex 是首选
二、Flex 布局到底在“控制”什么？
Flex 并不是直接控制子元素的宽高，而是：
由父容器统一管理子元素的排列方式和空间分配。
两个核心角色
- Flex 容器（父元素）
- Flex 项目（子元素）
只要给父元素加一句：
display: flex;
它的直接子元素就全部进入 Flex 布局体系。
注意一点非常重要：
一旦进入 Flex 布局，
子元素的 float、clear、vertical-align 全部失效。
三、主轴和侧轴：Flex 的灵魂概念
Flex 布局中没有“上下左右”的固定概念，只有：
- 主轴（main axis）
- 侧轴（cross axis）
默认情况：
- 主轴：水平方向（从左到右）
- 侧轴：垂直方向（从上到下）
但这两个轴是可以被修改的。
四、父容器常用属性详解（重点）
Flex 布局的大部分控制权在父元素手里。
1. flex-direction：主轴方向
决定子元素沿哪个方向排列。
常用值：
- row：从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
一旦主轴改变，侧轴会自动切换。
2. justify-content：主轴上的排列方式
用于控制子元素在主轴方向上的对齐和分布。
常见取值：
- flex-start：从起点开始
- flex-end：从终点开始
- center：居中
- space-between：两端贴边，中间均分
- space-around：每个元素左右留等距空间
在移动端导航栏、按钮组中非常常用。
3. flex-wrap：是否换行
默认情况下，Flex 项目不换行。
flex-wrap: nowrap;
如果希望内容超出后换行：
flex-wrap: wrap;
这个属性通常和 align-content 搭配使用。
4. align-items：侧轴对齐（单行）
控制子元素在侧轴上的对齐方式，适用于单行情况。
常见取值：
- flex-start
- flex-end
- center
- stretch（默认，拉伸）
这是实现“垂直居中”的常用方式之一。
5. align-content：侧轴对齐（多行）
只有在 子元素换行之后 才会生效。
它控制的是：多行整体如何在侧轴上分布。
这一点经常和 align-items 混淆，可以这样记：
- 单行：看 align-items
- 多行：看 align-content
6. flex-flow：方向 + 换行的简写
flex-flow: row wrap;
等价于：
flex-direction: row;
flex-wrap: wrap;
在实际项目中非常常见。
五、子项目常用属性
虽然 Flex 强调“父控子”，但子元素也有自己的能力。
1. flex：占用剩余空间的比例
.item {
flex: 1;
}
表示该元素占据剩余空间的一份。
常用于：
- 等分布局
- 自适应宽度
2. align-self：单个元素的侧轴对齐
用于覆盖父元素的 align-items。
.item {
align-self: flex-end;
}
适合做特殊元素的单独对齐。
3. order：调整显示顺序
.item {
order: 1;
}
数值越小，显示越靠前。
注意：
它只影响视觉顺序，不改变 DOM 结构。
六、Flex 在移动端布局中的常见思路
1. 一列布局
display: flex;
flex-direction: column;
常用于页面整体结构。
2. 顶部导航 + 内容区
- 父容器 column
- 导航固定高度
- 内容区 flex: 1
3. 多列等分布局
.item {
flex: 1;
}
移动端九宫格、功能入口常见写法。
七、Flex 使用中的几个易错点
- flex 作用在父元素，不是子元素
- 主轴一变，所有对齐逻辑都要重新判断
- align-items 和 align-content 的使用场景不同
- flex 并不是万能，复杂叠加仍然要配合定位
