如何在宽屏设备上让多个 div 水平排列（响应式 Flex 布局实践）-html教程-PHP中文网

如何在宽屏设备上让多个 div 水平排列（响应式 Flex 布局实践）

本文详解如何基于移动优先策略，利用 CSS Flexbox 在中大屏幕（≥768px）下将俱乐部时间区块（）由垂直堆叠转为水平并排显示，并提供语义化 HTML 结构、可维护的类名设计与关键响应式断点控制。

本文详解如何基于移动优先策略，利用 css flexbox 在中大屏幕（≥768px）下将俱乐部时间区块（`

`）由垂直堆叠转为水平并排显示，并提供语义化 html 结构、可维护的类名设计与关键响应式断点控制。

在移动端优先的响应式开发中，内容默认垂直流式布局是合理选择；但当视口变宽（如平板或桌面端），将同类信息模块（如“俱乐部时间”）横向排列，不仅能提升空间利用率，还能增强信息的可比性与视觉节奏感。本教程以 Ben's Chess Club 网站的 #club-times 区域为例，手把手实现从单列到多列的优雅过渡。

✅ 核心思路：容器驱动 + 断点控制

关键不在于给每个

单独设置样式，而在于为子元素创建一个具备弹性布局能力的父容器，再通过媒体查询在合适尺寸启用 display: flex 与 flex-wrap。

1. 重构 HTML 结构（语义化与可维护性）

首先，为时间区块添加清晰的语义化容器和子项类名，避免依赖 ID 或过度嵌套：

<!-- Club times -->
<section class="club-times black-background white-text"><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>

✅ 优势说明：

.club-times-container 明确承担布局职责，解耦结构与样式；

.time-block 统一管理每个时间单元的内边距、背景与居中，便于全局调整；

移除原 #club-times div 的宽泛选择器，避免样式污染。

2. 编写移动优先基础样式

默认状态下（小屏），.club-times-container 保持块级流式布局，.time-block 自动换行：

/* Club times — Mobile-first base */
.club-times {
  padding: 1.5rem 0;
}

.club-times h1 {
  color: #ffffff;
  text-align: center;
  font-family: "pacifico", sans-serif;
  margin-bottom: 1.5rem;
}

.club-times-container {
  /* 默认为普通文档流，无需额外声明 */
}

.time-block {
  margin: 0.75em auto;
  padding: 1rem;
  background-color: rgba(224, 224, 224, 0.9);
  border-radius: 4px;
  max-width: 300px;
  text-align: center;
}

3. 在宽屏下启用 Flex 横向布局（关键断点）

使用 @media (min-width: 768px) 启用弹性容器，并设置 flex-wrap: wrap 保证多项目自动换行（防溢出），同时优化间距与对齐：

/* Tablet and up: Enable horizontal layout */
@media screen and (min-width: 768px) {
  .club-times-container {
    display: flex;
    flex-wrap: wrap;        /* 允许换行，适应不同宽度 */
    justify-content: center; /* 水平居中对齐所有子项 */
    gap: 1.25rem;           /* 推荐替代 margin 的现代间距方案 */
  }

  .time-block {
    flex: 1 1 240px;        /* 弹性增长、收缩、基础宽度 */
    margin: 0;              /* 由 gap 统一控制间距，移除旧 margin */
    max-width: none;        /* 解除移动端限制，允许伸展 */
  }
}