答案：CSS Flexbox通过设置display: flex启用，可灵活控制子元素排列、对齐与尺寸。使用flex-direction定义主轴方向，justify-content和align-items分别控制主轴与交叉轴对齐，flex-grow、flex-shrink和flex-basis调节项目伸缩行为，flex-wrap实现换行布局，结合align-content管理多行间距，适用于响应式设计与常见页面布局。
使用CSS弹性盒子（Flexbox）能有效简化页面布局的构建过程，尤其在处理动态或未知尺寸的内容时表现突出。它让容器内的子元素能够自动调整大小、对齐方式和排列方向，从而实现更灵活、响应式更强的界面设计。
设置弹性容器
要启用弹性布局，先将父元素设为弹性容器：
display: flex;这一声明会让所有直接子元素成为弹性项目，并沿主轴（默认为水平方向）排列。如果需要垂直排列，可通过以下属性调整：
- flex-direction: column; —— 子元素垂直堆叠
- flex-direction: row-reverse; 或 column-reverse; —— 反向排列
控制主轴与交叉轴对齐
弹性布局有两个关键轴：主轴（main axis）和交叉轴（cross axis）。合理利用对齐属性可快速居中或分布元素。
立即学习“前端免费学习笔记（深入）”；
使用 justify-content 控制主轴上的对齐：
- justify-content: center; —— 居中对齐
- justify-content: space-between; —— 两端对齐，中间等距
- justify-content: flex-start; 或 flex-end; —— 靠左或靠右
使用 align-items 控制交叉轴对齐：
- align-items: center; —— 垂直居中
- align-items: flex-start; —— 顶部对齐
- align-items: stretch; —— 拉伸以填满容器（默认）
弹性项目的行为控制
每个子元素可通过以下属性进一步控制其在容器中的行为：
- flex-grow —— 定义项目的放大比例，默认为0（不放大）
- flex-shrink —— 定义缩小比例，防止溢出
- flex-basis —— 设置初始大小，如 100px 或 auto
简写形式：flex: 1; 相当于 flex: 1 1 0;，常用于让某个项目占据剩余空间。
处理换行与多行布局
默认情况下，弹性项目不会换行。若项目过多导致拥挤，可启用：
flex-wrap: wrap;再配合 align-content 控制多行之间的对齐，如：
- align-content: space-around; —— 行间距均匀分布
- align-content: stretch; —— 拉伸行以填满容器
结合 flex-wrap: wrap; 和 flex: 1 1 200px;，可轻松实现响应式卡片布局，自动换行且每项最小宽度可控。
基本上就这些。掌握 Flexbox 的核心属性后，大多数传统浮动或定位难以实现的布局都能简洁完成，尤其适合导航栏、页脚、卡片网格和垂直居中等场景。不复杂但容易忽略细节，比如容器是否包含内边距或边框影响计算。实际使用中建议搭配开发者工具实时调试。
