最直接的响应式手段是用媒体查询切换 flex-direction：小屏 column、大屏 row；配合 flex-wrap、flex-basis 控制换行；基础样式声明 display: flex，媒体查询仅覆盖变化属性；order 可调整视觉顺序但不影响可访问性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

媒体查询里改 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。