内容理由未按预期工作

Question

顺风。我希望项目 1、项目 2 从屏幕左侧开始，项目 3 从屏幕右侧开始。我似乎迷失了尝试自我回答以下问题：

是否需要在子组件中显式指定flex class？不应该，但是 flex-row 在没有添加 flex 的情况下不起作用。
为什么第 3 项没有移到右边？如果删除所有内部 div 并在父级上证明完成，它会按预期工作。

游乐场：https://play.tailwindcss.com/AwJKkx66oW

片段：

<div class="flex p-3 bg-gray-600 text-white">
  <!-- left side -->
  <div class="flex flex-row justify-start ">
    <div class="pr-4">Item 1</div>
    <div class="pr-4">Item 2</div>
  </div>
  <!-- right side -->
  <div class="flex flex-row justify-end">
    <div>Item 3</div>
  </div>
</div>

Answer 1

如果您的两个容器大小相同，justify-start 和 justify-end 将不执行任何操作。所有项目将对齐而不分离

在最后对齐某个元素之后有下一个项目的想法是：

有一个弹性容器
在应该放在末尾的项目上留有余量 left-auto（您可以使用 nth-child(3)

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}

p {
  margin: 3px;
  height: 75px;
  width: 75px;
  background: red;
}

p:nth-child(3) {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

内容理由未按预期工作

content justification not working as expected

css

flexbox