Tailwind CSS卡片布局求助：断点后横向排列及间距设置

直接上可生效的代码结构，你可以对照调整：

<!-- Trending Tours 父容器 -->
<div class="flex flex-col md:flex-row gap-4">
  <!-- 卡片1 -->
  <div class="tour-card">...</div>
  <!-- 卡片2 -->
  <div class="tour-card">...</div>
  <!-- 卡片3 -->
  <div class="tour-card">...</div>
</div>

核心要点说明 #

• 父容器基础用 flex flex-col，保证小屏幕下垂直排列；md:flex-row 指定在中等屏幕（默认768px）切换为横向排列，你可以根据需求换成 sm:/lg:/xl: 等断点前缀。
• 用 gap-4 给卡片添加统一间距（默认1rem），这个类会自动适配flex布局的横竖排列，比单独加margin更省心。

排查你配置未生效的常见原因 #

• 断点前缀写错：比如你要在大屏生效却用了 sm:flex-row，或者自定义了断点但没对应上，检查 tailwind.config.js 里的 theme.screens 配置是否和你预期的断点一致。
• 父容器没加基础flex类：如果父容器是默认的 block，断点加 flex-row 也不会生效，必须先给父容器加 flex 基础类。
• 存在冲突类：比如卡片或父容器加了 float:left、position:absolute 这类会干扰flex布局的样式，检查是否有这类冗余类。
• 间距类没加对位置：如果给卡片加 mx-4，横向排列时会出现双倍间距（相邻卡片margin叠加），优先给父容器加 gap 类，或者给卡片加 mx-2 配合父容器 mx-[-2] 抵消外层间距。

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