为什么内部div的flex-row不生效？如何实现两个div水平并排摆放

问题根因 #

• 弹性布局生效的前提是父容器首先开启flex模式，你仅给.media容器添加了flex-row（设置弹性主轴方向为水平），但没有添加flex类将容器声明为弹性容器，所以flex相关配置全部不生效，子元素保持默认块级元素垂直排列的特性。
• 你引用的是Tailwind CSS v0.5.2版本，该版本的flex、flex-row类均可用，不存在版本兼容性问题。

解决方法 #

给.media元素的class属性新增flex类即可实现两个子div水平并排，如果你需要调整两个子元素的间距，可以把子元素上的mx-auto替换为合适的左右边距类（比如mx-2），避免自动边距将两个元素推到容器两端。
修改后的核心代码如下：

<link href="https://unpkg.com/tailwindcss@0.5.2/dist/tailwind.min.css" rel="stylesheet" />
<div class="card mx-auto flex justify-center">
  <div class="card-body my-auto">
    <!-- 新增flex类，开启弹性布局 -->
    <div class="media bg-blue-600 flex flex-row">
      <!-- 可根据需要调整mx-auto为mx-1/mx-2控制间距 -->
      <div class="media-thumb w-10 h-10 bg-yellow-600 rounded-sm mx-2">
        <p>Test</p>
      </div>
      <div class="media-body w-10 h-10 bg-red-600 rounded-sm mx-2">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

本地与JSFiddle效果差异原因 #

本地运行效果和JSFiddle不一致一般是两个原因：

1. 本地项目引入的Tailwind CSS版本和代码中引用的v0.5.2版本不同，不同版本的默认样式或类名存在差异
2. 本地项目有全局CSS样式和当前代码中的样式冲突，覆盖了Tailwind的默认属性
   检查本地引入的静态资源版本，以及是否存在优先级更高的冲突样式即可解决。

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