要启用弹性布局需设置display:flex，容器属性控制子项排列方向、对齐方式和换行，子项属性定义伸缩性、尺寸与顺序，结合使用可高效实现一维布局如居中、等分和自适应结构。
要让HTML元素启用弹性布局（Flexbox），只需要在父容器上设置 display: flex 或 display: inline-flex，就能让其子元素变成弹性项目并沿主轴排列。下面详细介绍弹性布局的所有关键属性及其用法。
1. 容器属性：定义弹性容器的行为
这些属性应用于父容器（即设置了 display: flex 的元素）：
display: flex使容器成为块级弹性容器，所有直接子元素自动成为弹性项目。
示例：
立即学习“前端免费学习笔记（深入）”；
container {
display: flex;
}
flex-direction
定义主轴方向，决定子元素的排列方向。
- row：从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
定义项目在主轴上的对齐方式。
- flex-start：靠主轴起点对齐（默认）
- flex-end：靠主轴终点对齐
- center：居中对齐
- space-between：两端对齐，项目间间距相等
- space-around：每个项目两侧间距相等
- space-evenly：项目之间及边缘间距完全相等
定义项目在交叉轴上的对齐方式（垂直于主轴）。
- stretch：拉伸填满容器（默认，前提是没有设置高度）
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- baseline：文字基线对齐
当有多行弹性项目时（换行情况下），控制行与行之间的对齐方式。单行无效。
- stretch：拉伸填满空间（默认）
- flex-start：行靠上对齐
- flex-end：行靠下对齐
- center：行居中
- space-between：行之间均匀分布
- space-around：每行周围有相等空间
控制是否换行。
- nowrap：不换行（默认）
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
是 flex-direction 和 flex-wrap 的简写形式。
例如：
container {
flex-flow: row wrap;
}
2. 子项属性：控制每个弹性项目的具体行为
这些属性作用于弹性容器的直接子元素。
flex-grow
定义项目的放大比例，默认为0（不放大）。
如果所有项目都设为1，则等分剩余空间；某个设为2，则占据更多空间。
item {
flex-grow: 1;
}
flex-shrink
定义项目的缩小比例，默认为1（空间不足时自动缩小）。
设为0则不缩小。
item {
flex-shrink: 0;
}
flex-basis
设置项目在分配多余空间前的初始主轴尺寸，类似 width，但针对主轴。
- auto：根据内容大小决定（默认）
- 固定值：如 100px、20%
item {
flex-basis: 100px;
}
flex
是 flex-grow、flex-shrink、flex-basis 的简写。
常用写法：
- flex: 1 等价于 flex: 1 1 0；常用于等分空间
- flex: auto 等价于 flex: 1 1 auto
- flex: none 等价于 flex: 0 0 auto，表示不伸缩
定义项目的排列顺序，数值越小越靠前，默认为0，可为负数。
item3 {
order: -1;
}
align-self
允许单个项目有与其他项目不同的对齐方式，覆盖 align-items。
- auto：继承父容器的 align-items 值（默认）
- stretch、flex-start、flex-end、center、baseline
item2 {
align-self: center;
}
3. 实际使用建议
弹性布局非常适合做一维布局，比如导航栏、卡片排列、居中对齐等。
常见技巧：
- 水平垂直居中：
display: flex; justify-content: center; align-items: center; - 等分布局：
flex: 1给每个子项 - 圣杯布局左侧固定、右侧自适应：
left { flex: 0 0 200px; } right { flex: 1; }
