如何在Tailwind CSS移动端视图下实现第二行换行并保留横向滚动

实现方案 #

修改后代码可实现小屏下每行独立横向滚动、第二行及新增行自动排布在容器底部，大屏保持12列网格布局的需求：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 外层容器：小屏垂直排列每行，大屏走12列网格 -->
    <div class="mx-2 text-center md:grid md:grid-cols-12 md:gap-1 md:overflow-x-hidden flex flex-col gap-1">
      <!-- 第一行：小屏横向滚动 -->
      <div class="flex flex-nowrap space-x-1 overflow-x-auto md:contents">
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
      </div>

      <!-- 第二行：小屏单独成新行+横向滚动 -->
      <div class="flex flex-nowrap space-x-1 overflow-x-auto md:contents">
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
        <div class="border-2 border-black shrink-0">test</div>
      </div>
      
      <!-- 后续新增行直接按照上面第二行的结构添加即可，会自动排在容器底部 -->
    </div>
  </body>
</html>

关键改动说明 #

• 外层容器调整为移动端垂直排列（flex flex-col）、md及以上断点走12列网格，保证响应式适配逻辑不变
• 每一行内容单独用flex flex-nowrap overflow-x-auto容器包裹，实现每行独立横向滚动，新增行自然排在容器底部
• 行容器添加md:contents属性，大屏下容器会被“穿透”，子元素直接参与外层网格布局，不破坏原有大屏的12列排列逻辑
• 子项加shrink-0防止滚动时元素被自动压缩宽度

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