设置父容器display: flex后，子元素可通过flex属性自动伸缩适应空间，结合flex-wrap换行及justify-content、align-items对齐，实现响应式布局。
在CSS中使用弹性盒子布局（Flexbox）可以让子元素自动适应容器空间，实现灵活、响应式的排列方式。关键在于正确设置父容器的 display: flex 以及子元素的伸缩属性。
设置父容器为弹性容器
要让子元素实现自适应排列，首先需要将父容器定义为弹性容器：
.container {
display: flex;
}
此时所有直接子元素会默认沿水平方向（主轴）排列，并尝试在一行内显示。
控制子元素的伸缩行为
通过以下三个属性控制子元素如何伸缩以适应可用空间：
立即学习“前端免费学习笔记（深入）”；
- flex-grow：定义子元素的放大比例，默认为0（不放大）
- flex-shrink：定义子元素的缩小比例，默认为1（可缩小）
- flex-basis：定义子元素在分配多余空间前的初始大小
可以简写为 flex 属性：
.item {
flex: 1; /* 等价于 flex: 1 1 0% */
}
当多个子元素设置 flex: 1 时，它们将平分父容器的可用空间。
换行与对齐设置
如果子元素过多无法在一行放下，可通过 flex-wrap 允许换行：
.container {
display: flex;
flex-wrap: wrap;
}
结合 justify-content 和 align-items 可进一步控制主轴和交叉轴上的对齐方式：
- justify-content: space-between —— 子元素两端对齐，间距分布在中间
- align-items: center —— 子元素在交叉轴上居中对齐
基本上就这些。只要掌握 display: flex、flex 缩放属性和 flex-wrap 换行，就能实现大多数自适应布局需求。实际使用中建议先设父容器为 flex，再根据需要调整子项的 flex 值，观察效果逐步调试。
