< hr>带有显示弯曲的内部容器损坏 [英] <hr> inside container with display flex become corrupted

问题描述

这种行为有点奇怪和怪异。如果有一个容器，其显示属性设置为 flex 和 flex-direction 到列，其中的< hr> 元素的方向将改变并变为垂直

This behavior is a little odd and weird. If there is a container with its display property set to flex and flex-direction to column, the orientation of the <hr> elements inside it will change and become vertical and its height will decrease to fit the height of the line.

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>

签出< a href = http://codepen.io/ahmadalfy/pen/bEpjyY>这支笔。

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

This behavior is confirmed on Firefox and Chrome. I didn't find any explanation for it. How can I fix it?

推荐答案

根据 HTML5渲染- hr 元素，预计将被渲染

According to HTML5 Rendering - The hr element, it is expected to be rendered with this style:

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

具体地说，请注意 margin-left：auto ， margin-right：auto 。

这些样式用于水平放置块元素。根据计算宽度和边距-块

Those styles are used to center a block element horizontally. According to Calculating widths and margins - Block

如果同时左边距和右边距是 auto ，它们的使用值
是相等的。这会将元素相对于包含块的
边缘水平居中。

If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

在块布局中，此效果仅如果该块具有显式的宽度，则值得注意；否则该块将增长以覆盖其所有包含的块。

In a block layout this effect is only noticeable if the block has an explicit width, otherwise the block will grow to cover all its containing block.

在Flexbox中，它类似于：默认 align-self：自动 和 align-items：Stretch 使弹性项目增长以覆盖横轴上的弹性线（列布局中的水平线），并 auto 边距也可以用于居中。

In Flexbox it's similar: the default align-self: auto and align-items: stretch make flex items grow to cover the flex line in the cross axis (horizontal one in column layout), and auto margins can also be used to center.

但是，有很大的不同：根据尺寸确定， align-自我：stretch 不影响边距为 auto 的弹性项目：

However, there is a big difference: according to Cross Size Determination, align-self: stretch does not affect flex items with auto margins:

如果弹性商品具有 align-self：Stretch ，其计算出的交叉尺寸
属性为 auto ，并且其交叉轴均不边距为 auto ，
使用的外部十字尺寸是其折线的使用十字尺寸，
根据商品的最小和最大十字尺寸进行钳制属性。
否则，使用的十字尺寸是该商品的假设的跨过
大小。

If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s min and max cross size properties. Otherwise, the used cross size is the item’s hypothetical cross size.

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

Then, you can fix this problem by removing the auto margins:

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 的某个宽度将抵消由以下原因引起的收缩（从技术上讲，没有拉伸） 自动边距。

Alternatively, forcing a certain width through width or min-width would counteract the shrinking (more technically, the lack of stretch) caused by the auto margins.

这篇关于&lt; hr&gt;带有显示弯曲的内部容器损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！