用媒体查询切换 flex-direction 或 flex-basis 即可实现响应式布局：①flex-direction: column 适配竖排单列；②flex-basis 配合 flex-wrap 实现两列转一列，需注意 min-width 防止换行错乱。
直接用媒体查询切换 flex-direction 或调整子项的 flex-basis 就行，关键在断点设置和属性配合得当。
用 flex-direction: column 实现竖排单列
适合内容逻辑上本就是并列关系、移动端只需上下堆叠的场景。父容器保持 display: flex，只改方向：
.container {
display: flex;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}这样所有子项自动从左到右 → 改为从上到下排列，无需改动 HTML 结构。
用 flex-basis 控制列宽实现“两列→一列”
更灵活，尤其适合网格类布局（比如卡片列表），让子项在小屏时占满整行：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 1 1 48%; /* 默认两列，留点间隙 */
}
@media (max-width: 768px) {
.item {
flex-basis: 100%; /* 强制独占一行 */
}
}注意搭配 flex-wrap: wrap（父容器需设置），否则超宽可能溢出。
结合 flex-wrap 和 min-width 更稳妥
避免文字撑开导致换行错乱，给子项设最小宽度，再配合换行：
- 父容器加
flex-wrap: wrap - 子项设
flex: 1 1 300px（或具体像素值） - 小屏时用媒体查询把
flex-basis改成100%，或直接设width: 100%
基本上就这些，不复杂但容易忽略 flex-wrap 和 min-width 的配合，试一下就知道效果很干净。
