HTML5 CSS：行布局与响应式适配需求

当然有更轻量、更灵活的方案！完全不需要依赖第三方框架（比如w3.css），用纯CSS的媒体查询+Flexbox就能轻松实现你要的效果——移动端单行内联展示，桌面端转为3行布局，代码简洁易维护，还能完全自定义适配逻辑。

方案1：元素按“每行3个”自动换行（适合多元素场景） #

如果你的需求是移动端所有元素横向单行排列（超出可滚动），桌面端每行显示3个元素自动换行成多行（视觉上呈现3列布局，可形成3行及以上），可以用这个方案：

<!DOCTYPE html>
<html>
<head>
  <!-- 你的link标签放在这里 -->
  <style>
    /* 移动端基础样式：单行内联 */
    .layout-container {
      display: flex;
      flex-wrap: nowrap; /* 强制不换行，保持单行 */
      gap: 1rem; /* 元素间的间距，可自定义 */
      overflow-x: auto; /* 元素过多时允许横向滚动 */
      padding: 1rem;
    }

    .layout-item {
      flex-shrink: 0; /* 防止元素被压缩变形 */
      padding: 0.8rem;
      background: #f5f5f5;
      border-radius: 4px;
    }

    /* 桌面端适配（断点设为768px，可根据你的需求调整） */
    @media (min-width: 768px) {
      .layout-container {
        flex-wrap: wrap; /* 允许元素换行 */
        overflow-x: visible; /* 取消横向滚动 */
        max-width: 1000px; /* 限制容器宽度，避免过宽 */
        margin: 0 auto; /* 容器居中 */
      }

      .layout-item {
        width: calc(33.333% - 0.666rem); /* 每行3个元素，减去gap的影响 */
        flex-shrink: 1; /* 允许小范围压缩，适配容器宽度 */
      }
    }
  </style>
</head>
<body>
  <div class="layout-container">
    <div class="layout-item">内容块1</div>
    <div class="layout-item">内容块2</div>
    <div class="layout-item">内容块3</div>
    <div class="layout-item">内容块4</div>
    <div class="layout-item">内容块5</div>
    <div class="layout-item">内容块6</div>
  </div>
</body>
</html>

方案2：固定3行垂直排列（适合3个元素场景） #

如果你的需求是移动端3个元素横向单行展示，桌面端每个元素单独占一行（形成3行布局），可以用更简单的代码：

<!DOCTYPE html>
<html>
<head>
  <!-- 你的link标签放在这里 -->
  <style>
    .layout-container {
      display: flex;
      gap: 1rem;
      padding: 1rem;
    }

    /* 移动端：单行横向排列 */
    @media (max-width: 767px) {
      .layout-container {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
    }

    /* 桌面端：垂直排列成3行 */
    @media (min-width: 768px) {
      .layout-container {
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
      }
    }
  </style>
</head>
<body>
  <div class="layout-container">
    <div class="layout-item">顶部内容</div>
    <div class="layout-item">中间内容</div>
    <div class="layout-item">底部内容</div>
  </div>
</body>
</html>

方案优势 #

• 无依赖：不需要引入任何第三方样式库，纯原生CSS实现，加载更快
• 灵活可控：断点（768px）、元素间距、容器宽度等都可以根据你的需求自定义
• 兼容性好：Flexbox支持所有现代浏览器，包括IE11（如果需要兼容旧浏览器，可添加前缀）
• 代码简洁：核心逻辑只需要几十行CSS，比w3.css的通用方案更聚焦你的需求

内容的提问来源于stack exchange，提问作者Merle_the_Pearl