html - 弹性容器的非直接子子项似乎垂直未对齐。为什么？

Question

我正在尝试使用三个（黄框）标签：A、B 和 C。

我希望 A 左对齐，B 和 C 右对齐。因为我不希望 A 的框架在到达 B 之前增长，所以我设置了 A's display: inline。这似乎可行，但由于某种原因 A 行为不端：它显示为垂直未对齐。这似乎源于这是唯一p不是 flex 容器的直接子子元素的元素。但是为什么会这样呢？

body {
  margin: 0px;
}

#main {
  display: flex;
}

.node {
  margin: 0px;
  padding: 16px;
  border: 2px dashed yellow;
}

<div id="main" style="background: red;">
  <div style="flex-grow: 1;">
    <p class="node" style="display: inline;">A</p>
  </div>
  <p class="node">B</p>
  <p class="node">C</p>
</div>

谢谢

标签： htmlcssflexbox

Answer 1

只有元素的子元素（直接后代）flex具有 s 的属性flex-item。

这个给你：

body {
  margin: 0px;
}

#main {
  display: flex;
  background: red;
}

.node {
  margin: 0px;
  padding: 16px;
  border: 2px dashed yellow;
}

.node:first-child {margin-right:auto}

<div id="main" style="background: red;">
  <p class="node">A</p>
  <p class="node">B</p>
  <p class="node">C</p>
</div>