为什么我的柔性行不工作在我的内部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

您只需要为父容器中的类flex-row更改类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>

​