用媒体查询切换 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 控制列宽实现“两列→一列”

更灵活，尤其适合网格类布局（比如卡片列表），让子项在小屏时占满整行：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

.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 的配合，试一下就知道效果很干净。