本文讲解如何基于移动优先原则，通过 flexbox 和媒体查询实现俱乐部时间模块在大屏幕设备上水平排布，同时保持小屏竖向堆叠，兼顾可访问性与语义化结构。

本文讲解如何基于移动优先原则，通过 flexbox 和媒体查询实现俱乐部时间模块在大屏幕设备上水平排布，同时保持小屏竖向堆叠，兼顾可访问性与语义化结构。

在移动优先（Mobile-First）的响应式开发中，元素默认以单列流式布局呈现，这是符合小屏阅读习惯的合理起点。但当视口变宽（如平板或桌面端），将多个同类信息块（如“俱乐部时间”）横向并列展示，不仅能提升空间利用率，还能增强信息的可比性和视觉节奏感。

核心实现方案是：为子容器添加 display: flex 并配合 flex-wrap: wrap，再通过媒体查询在指定断点启用该布局。不同于直接对

设置 flex（易破坏文档流语义），最佳实践是封装一层语义清晰的容器（如

），仅对其应用弹性布局，确保结构与样式的职责分离。

以下是关键 CSS 代码（已整合进 768px 及以上断点）：

/* 移动端默认：竖向堆叠（无需额外声明） */
.club-times-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行，避免内容溢出 */
  justify-content: center; /* 水平居中对齐 */
  gap: 1rem; /* 推荐替代 margin，更可控的间距 */
}

.time-block {
  flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
  min-width: 200px; /* 防止过窄时内容挤压 */
  padding: 0.75rem;
  background-color: #E0E0E0;
  border-radius: 4px;
  text-align: center;
}

并在 HTML 中更新结构，明确语义层级：

<section class="club-times black-background white-text" id="club-times"><h1>Club Times</h1>
  <div class="club-times-container">
    <div class="time-block">
      <h2>Ages 8–12</h2>
      <h3>Friday</h3>
      <h3>17:30</h3>
    </div>
    <div class="time-block">
      <h2>Ages 13–15</h2>
      <h3>Saturday</h3>
      <h3>10:30</h3>
    </div>
    <div class="time-block">
      <h2>Ages 16–18</h2>
      <h3>Sunday</h3>
      <h3>12:00</h3>
    </div>
  </div>
</section>

✅ 关键注意事项：

• 不要移除 flex-basis 或 min-width：否则在中等宽度屏幕（如 800px）下，三列可能被迫压缩成两列甚至一列，破坏预期布局；flex: 1 1 200px + min-width: 200px 是稳健组合。
• 优先使用 gap 而非 margin：gap 专为 Flex/Grid 设计，不会触发外边距合并，且在多行布局中表现更一致。
• 媒体查询断点建议：当前示例在 768px 启用 Flex 布局，符合主流平板尺寸；若需更精细控制（如 992px 才三列并排），可新增媒体查询覆盖 .club-times-container 的 flex-direction 或 flex-wrap。
• 可访问性保障：保持

  的语义层级不变，屏幕阅读器仍能正确识别各时间块的标题结构，无需额外 ARIA 标注。

最终效果：移动端三块垂直堆叠，768px+ 屏幕自动转为水平三列（自动适应为两列或单列，取决于容器宽度），兼具灵活性、可维护性与现代 CSS 最佳实践。