Tailwind CSS 中的不同对齐方式

Question

我有三个 div：一个导航栏、一个 webgl 播放器和一个面板。 我希望导航栏位于顶部，其下方的面板与屏幕右侧对齐，并且 webgl 播放器在剩余空间中垂直和水平居中。

items-center成功地将事物垂直居中。

对于正确的水平定位，到目前为止，我已经尝试过justify-between ，它成功地将面板放在右边缘，但也将 webgl 播放器放在屏幕的左边缘，这是不可取的。

justify-center将它们都放在中间，我希望place-self-end它们放在右侧元素上以正确放置它，但它根本没有移动。

最小代码示例：

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col justify-center"></div>
  <div class="flex flex-row justify-center items-center">
    <div class="bg-blue-500 w-80 h-60 center"></div>
    <div class="bg-red-500 w-80 h-screen "></div>
  </div>
</div>

也可以在这里找到： https://play.tailwindcss.com/y3uXkVYcWs

期望的结果： 其中绿色是导航栏，蓝色是第一个 div，红色是第二个 div。

Answer 1

写完这一切，我终于找到了这个答案： 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

这表示要删除任何justify和items-center而是在蓝色元素上使用margin: auto

HTML

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col"></div>
  <div class="flex flex-row justify-center">
    <div class="bg-blue-500 w-80 h-60 center" id="webglPlayer"></div>
    <div class="bg-red-500 w-80 h-screen" ></div>
  </div>
</div>

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

#webglPlayer {
    margin: auto;
}