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

根据HTML5 Rendering - The hr element，预计会以这种风格呈现：

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

具体来说，请注意margin-left: auto，margin-right: auto。

这些样式用于水平居中块元素。根据{{3}}

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

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

在Flexbox中它类似：默认Calculating widths and margins - Block和align-self: auto使弹性项目增长以覆盖横轴中的柔性线（列布局中的水平线）和{{3 }}

但是，存在很大差异：根据align-items: stretch，align-self: stretch不会影响auto页边距的展示项：

如果弹性项目具有auto margins can also be used to center，则其计算的交叉大小属性为auto，其横轴边距均不为auto，使用的外部交叉尺寸是其柔性线的使用交叉尺寸，根据项目的最小和最大交叉尺寸属性进行夹紧。否则，使用的交叉大小是项目的Cross Size Determination。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，通过width或min-width强制某个宽度可以抵消由auto边距引起的缩小（技术上更多，缺乏拉伸）。

Answer 2

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

这可行的原因是弹性框容器的所有子项都是flex-items。所以在你的情况下hr是一个flex项。这就是它的造型受到影响的原因。当你使这个hr成为弹性箱容器的大孩子时，它将不再影响它的样式。

这就是我们将<div>添加为<hr/>的父级的原因。 <div>成为Flex容器的flex项。 <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>

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

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

2 个答案: