为什么我的 flex-row 不能在我的内部 div

Question

我目前正在尝试将两个 div 水平放置在一起，我的想法是使用 flexbox，但是添加属性 flex-row 似乎没有任何作用我不知道为什么。

如何正确地水平对齐包含“Test”的 div？

.card {
  width: 300px;
  height: 200px;
  border-radius: 4px;
  border-width: 1px;
  border-color: lightgrey;
  background-color: orangered;
}

.card-body {
  width: 90%;
  height: 90%;
  background-color: blue;
}

.media {
  width: 100%;
  border-color: lightgrey;
}

<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">
    <div class="media bg-blue-600 flex-row">

      <div class="media-thumb w-10 h-10 bg-yellow-600 rounded-sm mx-auto">
        <p>Test</p>
      </div>

      <div class="media-body w-10 h-10 bg-red-600 rounded-sm mx-auto">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

此外，与 JSFiddle
相比，我在本地运行它看起来不一样

Answer 1

您只需将父容器中的class flex-row更改为class flex。请参阅下面的工作片段：

.card {
  width: 300px;
  height: 200px;
  border-radius: 4px;
  border-width: 1px;
  border-color: lightgrey;
  background-color: orangered;
}

.card-body {
  width: 90%;
  height: 90%;
  background-color: blue;
}

.media {
  width: 100%;
  border-color: lightgrey;
}

<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">
    <div class="media bg-blue-600 flex">

      <div class="media-thumb w-10 h-10 bg-yellow-600 rounded-sm mx-auto">
        <p>Test</p>
      </div>

      <div class="media-body w-10 h-10 bg-red-600 rounded-sm mx-auto">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

为什么我的 flex-row 不能在我的内部 div

why doesn't my flex-row work on my inner div

html

css

tailwind-css