最直接的响应式手段是用媒体查询切换 flex-direction：小屏 column、大屏 row；配合 flex-wrap、flex-basis 控制换行；基础样式声明 display: flex，媒体查询仅覆盖变化属性；order 可调整视觉顺序但不影响可访问性。
媒体查询里改 flex-direction 是最直接的响应式手段
小屏幕竖排、大屏幕横排，本质就是切换 flex-direction。别绕弯子写 js 控制类名，纯 css 就能搞定：
@media (max-width: 768px) { .container { flex-direction: column; } } @media (min-width: 769px) { .container { flex-direction: row; } }注意断点值要和设计稿对齐，768px 是常见平板分界，但如果你的导航栏在 640px 就挤不下了，就该用 640px。
用 flex-wrap 配合 flex-basis 控制换行行为
单行布局在窄屏下容易溢出，这时候不能只靠 flex-direction，得让子项“主动换行”：
.grid { display: flex; flex-wrap: wrap; } .grid > * { flex: 1 1 250px; /* 不强制固定宽，允许压缩或撑开 */ } @media (max-width: 480px) { .grid > * { flex-basis: 100%; /* 小屏下单列占满 */ } }关键在 flex-basis：它比 width 更尊重 Flex 容器的分配逻辑；设为 100% 后，flex-grow 和 flex-shrink 依然生效，不会锁死尺寸。
别在媒体查询里重写整个 display: flex
有人习惯在每个断点都写一遍 display: flex，这是冗余且易出错的：
/* ❌ 不要这样 */ @media (max-width: 768px) { .nav { display: flex; justify-content: space-between; } } @media (min-width: 769px) { .nav { display: flex; flex-direction: row; } }正确做法是基础样式先声明 display: flex，媒体查询只覆盖需要变的部分：
.nav { display: flex; justify-content: center; } @media (min-width: 769px) { .nav { justify-content: space-between; } }否则一旦漏写某个断点，display 可能退化成 block，整块布局就塌了。
order 属性在响应式中常被低估
视觉顺序和 dom 顺序不一致时（比如移动端把侧边栏提到顶部），order 比移动 HTML 更轻量：
.main { order: 2; } .sidebar { order: 1; } @media (min-width: 1024px) { .main { order: 1; } .sidebar { order: 2; } }注意：order 只影响视觉流，不影响可访问性顺序（屏幕阅读器仍按 HTML 顺序读），如果语义层级有变化，得配合 aria-order 或重构 DOM。