当 align-items 设置为 flex-start 或 flex-end 时，Div 块和段落未对齐

Question

在 flexbox 中，当属性

align-items

设置为

flex-start

或

flex-end

时，段落和 div 块不会使用相同的行来对齐它们自己。使用 flex-end 时，div 是“悬挂”的，而段落是“放置”的。正如您在此示例中看到的，div 元素的上边框与段落的底部对齐。 （使用强制文本占几行的窄 flexbox，不清楚 div 块如何准确对齐，但它仍然挂起。）

.flexbox {
  display: flex;
  align-items: flex-end;
  background-color: yellow;
}
.flexbox p {
  background-color: blue;
}
.flexbox div {
  background-color: red;
}

<div class=flexbox>
  <p>This is a paragraph.</p>
  <p>This is a paragraph<br>split in two lines</p>
  <div>This is not a paragraph.</div>
</div>

我尝试了各种方法，包括将我的段落嵌套在 div 中，但对齐方式保持不变。我也玩过

display

属性，但问题似乎与此无关。

在实际情况下，我的 div 中有包含 svg 图像的链接，这是一个简化的示例。

Answer 1

浏览器会在段落元素上设置默认边距，但不会在 div 上设置。

覆盖这些边距。

.flexbox {
  display: flex;
  align-items: flex-end;
  background-color: yellow;
}
.flexbox p {
  margin: 0; /* new */
  background-color: blue;
}
.flexbox div {
  background-color: red;
}

<div class=flexbox>
  <p>This is a paragraph.</p>
  <p>This is a paragraph<br>split in two lines</p>
  <div>This is not a paragraph.</div>
</div>