需用CSS Flexbox实现响应式布局：一、设父容器display:flex；二、用justify-content和align-items控制主/交叉轴对齐；三、用align-self调整单子项交叉轴对齐；四、用flex-grow/shrink/basis控制伸缩；五、用flex-wrap和align-content处理多行布局。
如果您希望网页元素能够根据屏幕尺寸自动调整大小和位置，实现响应式排布效果，则需要借助 CSS Flexbox 模块。以下是针对 Flexbox 弹性布局设计的多种具体应用方案：
一、设置容器为弹性上下文
Flexbox 的基础是将父容器定义为弹性容器，从而使其子元素进入弹性布局模式。该步骤决定了后续所有对齐、顺序、换行等行为的生效前提。
1、在 CSS 中选中目标父级元素，例如 .container。
2、为其添加 display: flex; 声明。
立即学习“前端免费学习笔记（深入）”；
3、可选地添加 flex-direction: row; 明确主轴方向为水平排列。
二、控制主轴与交叉轴对齐方式
通过 justify-content 和 align-items 属性，可在不改变 HTML 结构的前提下，精准调控子元素在主轴与交叉轴上的分布位置。
1、为容器设置 justify-content: center; 实现主轴居中对齐。
2、添加 align-items: stretch; 使子元素在交叉轴上拉伸填满容器高度（默认值）。
3、若需垂直居中且水平居中，同时使用 justify-content: center; 与 align-items: center;。
三、调整单个项目在交叉轴上的对齐
当容器内多个子项高度不一致时，align-self 可覆盖 align-items 的统一设定，单独指定某个子项的交叉轴对齐方式。
1、为特定子元素（如 .item-2）添加 CSS 规则。
2、设置 align-self: flex-start; 使其顶部对齐。
3、也可设为 align-self: flex-end; 或 align-self: center; 以实现差异化定位。
四、设置子项的弹性增长与收缩行为
利用 flex-grow、flex-shrink 和 flex-basis 组合，可精细控制子元素在空间富余或不足时的尺寸响应逻辑。
1、为子项设置 flex: 1;，等效于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;。
2、若仅希望某子项占据剩余空间而不压缩，使用 flex: 1 0 auto;。
3、对固定宽度子项（如图标栏），设为 flex: 0 0 60px;，禁止伸缩并锁定基础宽度。
五、启用多行弹性布局并控制换行对齐
当子项数量超出单行容纳能力时，可通过 flex-wrap 启用换行，并用 align-content 控制各行在交叉轴上的整体分布。
1、在容器上添加 flex-wrap: wrap; 允许子项折行排列。
2、设置 align-content: space-between; 使多行之间均匀分配空白区域。
3、若需各行顶部对齐，使用 align-content: flex-start;。
