实现弹性布局需设置容器display:flex，通过flex-direction定义主轴方向，justify-content控制主轴对齐，align-items设置交叉轴对齐，flex-wrap处理换行，align-content调整多行分布，子项可用flex属性定义伸缩性。
要实现弹性容器布局，核心是使用 CSS 的 Flexbox 模型。只需设置容器的 display 属性为 flex 或 inline-flex，其直接子元素就会变成弹性项目，并按照弹性规则进行排列。
1. 创建弹性容器
将父元素设为弹性容器：
display: flex;这样它的子元素会自动沿主轴（默认为水平方向）排列。
示例：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
}
2. 控制主轴方向
使用 flex-direction 设置项目排列方向：
- flex-direction: row; — 水平从左到右（默认）
- flex-direction: row-reverse; — 水平从右到左
- flex-direction: column; — 垂直从上到下
- flex-direction: column-reverse; — 垂直从下到上
3. 设置主轴对齐方式
用 justify-content 调整项目在主轴上的对齐：
- justify-content: flex-start; — 靠起点对齐
- justify-content: flex-end; — 靠终点对齐
- justify-content: center; — 居中对齐
- justify-content: space-between; — 两端对齐，中间等距
- justify-content: space-around; — 项目周围留等间距
4. 设置交叉轴对齐方式
用 align-items 控制项目在交叉轴上的对齐：
- align-items: flex-start; — 靠交叉轴起点对齐
- align-items: flex-end; — 靠终点对齐
- align-items: center; — 交叉轴居中
- align-items: stretch; — 拉伸填满容器（默认）
- align-items: baseline; — 文本基线对齐
若想单独调整某个子项，可用 align-self 覆盖 align-items。
5. 处理换行与多行对齐
当项目过多时，可用 flex-wrap 允许换行：
- flex-wrap: nowrap; — 不换行（默认）
- flex-wrap: wrap; — 按顺序换行
- flex-wrap: wrap-reverse; — 反向换行
配合 align-content 设置多行在交叉轴上的分布，类似 justify-content 对单行的作用。
6. 弹性项目属性
子元素可设置：
- flex-grow：定义放大比例（占剩余空间）
- flex-shrink：定义缩小比例
-
flex-basis：设置基准大小（如
flex-basis: 200px）
简写形式：flex: 1; 或 flex: 1 1 auto;
基本上就这些。掌握这几个关键属性，就能灵活构建响应式、自适应的页面布局。不复杂但容易忽略细节，比如容器和项目的关系、主轴与交叉轴的方向变化等。
