一、Flex 布局：让网页布局更「弹性」
1. 什么是 Flex 布局？
Flex 是 Flexible Box（弹性盒子） 的缩写，是 CSS 中一种强大的布局模型，专门用来解决「元素在容器内的动态排列」问题。
核心优势：
自动适应不同屏幕尺寸（手机、平板、PC）轻松实现垂直 / 水平居中、元素自动换行、空间分配等效果子元素的 float clear vertical-align 属性会失效（专注 Flex 自身规则）
2. 如何启用 Flex 布局？
/* 块级容器（如 div） */
.flex-container {
display: flex; /* 开启 Flex 布局 */
}
/* 行内容器（如 span） */
.inline-flex-container {
display: inline-flex; /* 不独占一行的弹性容器 */
}
二、Flex 布局核心概念：两根轴 + 两个角色
1. 角色划分：容器 vs 项目
Flex 容器（父元素）：设置 display: flex 的元素，决定子元素的排列规则。Flex 项目（子元素）：容器的直接子元素，自动成为弹性项目（嵌套的子元素同样适用）。
2. 两根关键轴：主轴 vs 交叉轴
主轴：默认是水平方向（从左到右），由 flex-direction 属性决定方向。交叉轴：默认是垂直方向（从上到下），与主轴垂直。关键术语：
main start（主轴起点）、main end（主轴终点）cross start（交叉轴起点）、cross end（交叉轴终点）
水平主轴，垂直交叉轴，项目沿主轴排列
三、容器属性：控制项目的「排列规则」
1. flex-direction：决定主轴方向（项目排列方向）
.flex-container {
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
row（默认）：水平排列，起点在左端（左→右）。row-reverse：水平排列，起点在右端（右→左）。column：垂直排列，起点在上沿（上→下）。column-reverse：垂直排列，起点在下沿（下→上）。
示例：
效果：项目垂直排列（从上到下）。
2. flex-wrap：控制项目是否换行
.flex-container {
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
nowrap（默认）：不换行，项目挤压或拉伸以适应容器宽度。
wrap：换行，第一行在上方，后续行依次向下排列。
wrap-reverse：换行，第一行在下方，后续行依次向上排列。
3. flex-flow：flex-direction + flex-wrap 的简写
.flex-container {
flex-flow: [flex-direction] [flex-wrap]; /* 例如：row wrap */
}
默认值：row nowrap（水平不换行）。
4. justify-content：主轴上的对齐方式
.flex-container {
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}
flex-start（默认）：项目靠主轴起点排列（左对齐）。flex-end：项目靠主轴终点排列（右对齐）。center：项目居中排列。space-between：项目两端对齐，中间间隔相等（左右不留白）。space-around：项目两侧间隔相等（左右留白是中间间隔的一半）。
示例代码：
效果：1 靠左，3 靠右，1-2 和 2-3 间距相等。
5. align-items：交叉轴上的对齐方式
.flex-container {
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
}
flex-start：项目靠交叉轴起点对齐（顶部对齐）。flex-end：项目靠交叉轴终点对齐（底部对齐）。center：项目居中对齐（垂直居中）。baseline：项目第一行文字的基线对齐（文本基线对齐）。stretch（默认）：项目未设置高度时，撑满容器高度。
经典场景：垂直居中元素
.center-container {
display: flex;
height: 200px; /* 容器高度 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
四、项目属性：单个元素的「个性化控制」
1. order：调整项目排列顺序
.item {
order: <整数>; /* 数值越小，排列越靠前，默认 0 */
}
示例：
效果：排列顺序为 2 → 1 → 3（原顺序 1 → 2 → 3）。
2. flex-grow：放大比例（分配剩余空间）
.item {
flex-grow: <数字>; /* 默认 0（不放大） */
}
所有项目 flex-grow: 1 时，等分剩余空间。若一个项目 flex-grow: 2，其他为 1，则它分得的空间是其他项目的 2 倍。
场景：三列布局，右侧列自适应宽
.columns {
display: flex;
}
.left { width: 200px; } /* 固定宽 */
.right { flex-grow: 1; } /* 剩余空间全部分配给右侧 */
3. flex-shrink：缩小比例（空间不足时收缩）
.item {
flex-shrink: <数字>; /* 默认 1（会缩小），0 表示不缩小 */
}
数值越大，收缩比例越高（负值无效）。示例：禁止某个项目缩小
.no-shrink {
flex-shrink: 0; /* 空间不足时不缩小 */
}
4. flex-basis：项目在主轴上的基础宽度
.item {
flex-basis: <长度> | auto; /* 默认 auto（按自身大小计算） */
}
若设置 flex-basis: 100px，项目先占据 100px 空间，再参与剩余空间分配。优先级高于 width（主轴为水平时）或 height（主轴为垂直时）。
5. flex：三合一简写属性
.item {
flex: [flex-grow] [flex-shrink] [flex-basis]; /* 推荐使用简写 */
}
默认值：0 1 auto（不放大，会缩小，基础宽度自动）。快捷值：
flex: auto → 1 1 auto（可放大可缩小）flex: none → 0 0 auto（固定大小，不放大不缩小）flex: 1 → 1 1 0%（常用：等分剩余空间）
6. align-self：单个项目的交叉轴对齐（覆盖容器规则）
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
auto（默认）：继承容器的 align-items 规则。示例：让某个项目底部对齐（其他项目居中）
五、实战案例：3 个经典布局场景
1. 水平居中 + 垂直居中（万能居中法）
效果：无论内容多少，始终在容器中心。
2. 响应式导航栏（自动换行）
.nav {
display: flex;
flex-wrap: wrap; /* 小屏幕时自动换行 */
justify-content: center; /* 居中排列 */
gap: 10px; /* 项目间距（现代浏览器支持） */
}
.nav-item {
padding: 8px 16px;
background: #f0f0f0;
}
场景：屏幕缩小时，导航项自动换行，保持间距。
3. 圣杯布局（两侧固定，中间自适应）
核心：中间 flex: 1 占据剩余空间，两侧固定宽度。
六、总结：Flex 布局为什么值得学？
简单高效：几行代码搞定复杂对齐和响应式需求。兼容性强：现代浏览器全支持，旧版 Safari 只需加前缀。场景通用：从导航栏、表单到复杂页面布局，几乎无所不能。