justify-content 属性与 hr 标签中断

Question

如果hr 元素被扔到一个弹性容器中，而justify-content 设置为flex-start，则hr 将占据所有空间，而其他元素将像justify-content 一样分布设置为space-between。

This answer（从 2015 年开始）解释说 hr 的左右边距默认为 auto。然而，Firefox 的 Inspector 将左右边距的 Box 模型显示为 0，如下面的代码 sn-p 和图像所示。当我们将它们显式设置为 auto 时，盒模型还会在这些边距中显示 auto。

这似乎是一个 Firefox 错误，因为 Chrome 显示正确测量的auto 边距。或者在过去几年中，规范是否发生了变化，而我的 Firefox（Debian 9 上的 Quantum 60.8.0esr 64 位）已经过时了？

当横向边距明显不同时，图像显示为“0”。

html,body {
  height: 100%;
  margin: 0;
}
.div {
  display: flex;
  background-color: lightgreen;
  justify-content: flex-start;
  height: 50%;
}
.div div {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}

<div class='div'>
<div>A</div>
<div>B</div>
<hr>
<div>C</div>
</div>

下面是它的外观（hr 已被删除，但它应该具有其他 div 的大致宽度）。

html,body {
  height: 100%;
  margin: 0;
}
.div {
  display: flex;
  background-color: lightgreen;
  justify-content: flex-start;
  height: 50%;
}
.div div {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}

<div class='div'>
<div>A</div>
<div>B</div>
<div>C</div>
</div>

Answer 1

margin: inherit; 将解决您的问题。

html,body {
  height: 100%;
  margin: 0;
}
.div {
  display: flex;
  background-color: lightgreen;
  justify-content: flex-start;
  height: 50%;
}
.div div {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}
hr{
  margin: inherit;
}

<div class='div'>
<div>A</div>
<div>B</div>
<hr>
<div>C</div>
</div>

Answer 2

在 Firefox 和 Chrome 上，hr 元素的默认左右边距为 auto。

火狐

铬

注意事项：

-“inline-start”是文本开始的那一侧。它是 LTR 中的左侧。

- "block-start" 是横写模式的顶部。

-“-end”指对边。

-source: § 6.2. Flow-relative Directions

---

所以我们确定我们有一个具有水平 auto 边距的弹性项目 (hr)。

这意味着hr 将消耗双方的所有可用空间。

这就是为什么它的兄弟 A 和 B 被固定在左边，而 C 被固定在右边。

此行为与justify-content 无关，它在您的布局中不起作用。为什么？

§ 8.1. Aligning with auto margins

如果空闲空间分配给auto边距，对齐 属性在该维度上没有影响，因为边距 会偷走弯曲后剩余的所有可用空间。

换句话说，当应用auto 边距时，justify-content 不会产生任何影响，因为没有剩余空间可供分配。因此，justify-content 在您的布局中完全被忽略。

---

要使您的布局正常工作，您需要覆盖 hr 上的浏览​​器默认样式。

将此添加到您的代码中：

hr {
  margin-left: 0;
  margin-right: 0;
}

.div {
  display: flex;
  background-color: lightgreen;
  justify-content: flex-start;
  height: 50%;
}

.div div {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}

hr {
  margin-left: 0;
  margin-right: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

<div class='div'>
  <div>A</div>
  <div>B</div>
  <hr>
  <div>C</div>
</div>

或者，更简单的是，将您的选择器从 .div div 修改为：

.div > * {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}

.div {
  display: flex;
  background-color: lightgreen;
  justify-content: flex-start;
  height: 50%;
}

.div > * {
  background-color: yellow;
  border: 5px solid green;
  margin: 5px;
}

html,
body {
  height: 100%;
  margin: 0;
}

<div class='div'>
  <div>A</div>
  <div>B</div>
  <hr>
  <div>C</div>
</div>