html - 为什么我的 flex-row 不能在我的内部 div 上工作

Question

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

如何正确地将包含“测试”的 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 相比，当我在本地运行它时，它看起来也有所不同

标签： htmlcsstailwind-css

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>