<hr> 显示 flex 的容器内已损坏

Question

这种行为有点奇怪和怪异。如果有一个容器，其display 属性设置为flex，flex-direction 设置为column，则其中的<hr> 元素的方向将改变并变为垂直，并且其高度将减小以适应行。

html, body {
  height: 100%;
}
body {
  font-family: sans-serif;
}
.container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<div class="container">
  <h3>Title</h3>
  <hr/>
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

查看this pen。

此行为在 Firefox 和 Chrome 上得到确认。我没有找到任何解释。我该如何解决？

Answer 1

尝试将您的hr 包含在另一个弹性项目（如div、span 或其他内容）中，如下所示。这将解决您的问题。

之所以可行，是因为弹性盒容器的所有子项都是弹性项目。所以在你的情况下hr 是一个弹性项目。这就是它的造型受到影响的原因。当您将此 hr 设为弹性盒容器的孙子时，它将不再影响其样式。

这就是我们添加<div> 作为<hr/> 的父级的原因。 <div> 成为你的弹性容器的弹性项目。 <hr> 不再是弹性项目。

html, body {
  height: 100%;
}
body {
  font-family: sans-serif;
}
.container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<div class="container">
  <h3>Title</h3>
  <div><hr/></div>
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

进一步阅读（强烈推荐）：

• Basic Concepts of Flexbox
• Ordering Flex Items

Answer 2

根据HTML5 Rendering - The hr element，预计会用这种风格渲染：

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }

具体请注意margin-left: auto、margin-right: auto。

这些样式用于将块元素水平居中。根据Calculating widths and margins - Block

如果margin-left 和margin-right 都是auto，则它们使用的值 是平等的。这使元素相对于 包含块的边缘。

在块布局中，只有当块具有明确的宽度时，这种效果才会显着，否则块将增长到覆盖其所有包含块。

在 Flexbox 中是类似的：默认的 align-self: auto 和 align-items: stretch 使弹性项目增长到覆盖交叉轴上的弹性线（列布局中的水平线）和 auto margins can also be used to center。

但是，有一个很大的区别：根据Cross Size Determination，align-self: stretch 不影响具有auto 边距的弹性项目：

如果一个弹性项目有align-self: stretch，它的计算交叉大小 属性为auto，其横轴边距均不是auto， 使用的外部交叉尺寸是其柔性线的使用的交叉尺寸， 根据项目的最小和最大交叉尺寸属性进行固定。 否则，使用的十字尺寸是项目的hypothetical cross size。

然后，您可以通过删除auto 边距来解决此问题：

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

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
hr {
  margin-left: 0;
  margin-right: 0;
}

<div class="container">
  <h3>Title</h3>
  <hr />
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

另外，通过width 或min-width 强制一定宽度可以抵消由auto 边距引起的收缩（从技术上讲，是缺乏拉伸）。

Answer 3

我发现设置<hr> 的宽度也可以100% 解决问题。还是很奇怪，我不知道为什么会这样。

Here is a pen