Flexbox通过flex-grow、flex-shrink和flex-basis控制子元素伸缩行为，实现响应式布局：flex:1常用于均分空间，结合媒体查询可调整不同屏幕下的布局表现，如等宽分布、固定与自适应组合、移动端堆叠等；需注意父容器设display:flex，避免width与flex-basis冲突，并用min-width防止内容重叠，提升布局灵活性。
在CSS中使用Flexbox实现响应式布局时，子元素的伸缩行为是关键。通过控制 flex-grow、flex-shrink 和 flex-basis 属性，可以让子元素根据容器空间自动调整大小，适配不同屏幕尺寸。
理解 flex 的三个核心属性
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写，决定了子元素如何伸缩：
- flex-grow：定义子元素的放大比例，默认为0（不放大）
- flex-shrink：定义子元素的缩小比例，默认为1（可缩小）
- flex-basis：设置子元素的初始主轴尺寸，可设为像素值或百分比，也可用 auto
例如：flex: 1 表示 flex: 1 1 0% 或 flex: 1 1 auto（取决于浏览器），常用于均分容器空间。
常见响应式伸缩场景与应用
在实际开发中，结合媒体查询和 flex 属性可以实现灵活的响应式效果：
立即学习“前端免费学习笔记（深入）”；
- 多个子元素等宽分布：设置 flex: 1，让它们平分剩余空间
- 固定宽度 + 自适应宽度组合：一个元素设固定宽度（如 flex: 0 0 200px），另一个设 flex: 1 占据剩余空间
- 移动端堆叠显示：通过媒体查询改变 flex-direction 为 column，同时调整 flex 值以适应垂直布局
配合媒体查询实现断点适配
在不同屏幕下调整 flex 行为，例如：
.container {
display: flex;
gap: 16px;
}
<p>.item {
flex: 1;
}</p><p>.item.wide {
flex: 2; /<em> 默认占两份空间 </em>/
}</p><p>@media (max-width: 768px) {
.item.wide {
flex: 1; /<em> 小屏下恢复等分 </em>/
}
}
这样在大屏上某个区域更宽，小屏则重新平衡布局，避免溢出或留白过多。
注意事项与最佳实践
使用 flex 伸缩时注意以下几点：
- 父容器必须设置 display: flex
- 避免给子元素设置 width 同时又使用 flex-basis: auto，容易引起冲突
- 测试极端分辨率下的表现，防止内容被过度压缩
- 使用 min-width 或 min-height 防止内容重叠
基本上就这些。合理使用 flex 的伸缩性，能大幅简化响应式布局的实现过程，减少对浮动或定位的依赖。
