答案：使用 display: flex 启用弹性布局，通过 flex-direction 设置方向，flex-wrap 控制换行，justify-content 和 align-items 定义对齐，flex 属性调节子项伸缩性，实现响应式布局。
使用 CSS 的 flex 属性可以轻松实现弹性布局，让容器内的子元素自动调整大小和位置，适应不同屏幕尺寸。关键在于设置父容器为弹性容器，并通过相关属性控制子项的排列方式。
1. 启用弹性布局（display: flex）
要开启弹性布局，先给父容器设置 display: flex 或 display: inline-flex。
说明：- display: flex：使容器成为块级弹性容器，子元素在同一行排列。
- display: inline-flex：容器为内联弹性容器，不独占一行。
示例：
container {
display: flex;
}
2. 控制主轴方向（flex-direction）
通过 flex-direction 设置子元素的排列方向。
立即学习“前端免费学习笔记（深入）”；
- row：从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
示例：
container {
display: flex;
flex-direction: column;
}
3. 设置换行与对齐方式
当子元素超出容器时，可用 flex-wrap 控制是否换行。
- nowrap：不换行（默认）
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
结合 justify-content 和 align-items 可控制对齐：
- justify-content：主轴对齐方式（如 center、space-between、flex-start）
- align-items：交叉轴对齐方式（如 center、flex-end、stretch）
示例：居中对齐所有子项
container {
display: flex;
justify-content: center;
align-items: center;
}
4. 控制子元素的伸缩行为（flex 属性）
每个子元素可通过 flex 缩写属性控制其增长、收缩和基础大小。
语法：flex: [flex-grow] [flex-shrink] [flex-basis]
- flex-grow：分配剩余空间的比例（0 不扩展，1 或以上按比例扩展）
- flex-shrink：空间不足时的收缩比例
- flex-basis：初始主轴尺寸（可设为 auto、0 或具体数值如 200px）
常用简写：
- flex: 1：等比扩展，常用于均分空间
- flex: 0 1 auto：默认值，不扩展但可收缩
- flex: none：完全不伸缩
示例：三个子项等宽填充容器
.item {
flex: 1;
}
基本上就这些。掌握 display、flex-direction、justify-content、align-items 和 flex 这几个核心属性，就能灵活控制大多数弹性布局场景。实际使用中建议先设容器为 flex，再根据方向和对齐需求调整参数，最后用 flex 控制子项伸缩性。不复杂但容易忽略细节，比如默认不换行或 flex-basis 的影响。调试时可用浏览器开发者工具查看主轴和交叉轴的实际分布。
