如何使用flex水平显示hr？

Question

当使用flexbox进行样式设置时，如果将父容器设置为该样式，display: flex则会导致<hr />垂直显示而不是水平显示。

.container {
  display: flex;
  flex: 1;
}

<div class='container'>
  <h2>Test</h2>
  <hr />
</div>

Answer 1

使用flex-grow: 1或width: 100%因此将增长到父的宽度相匹配。如果您打算将更多 flex 子项放入，您可能希望将其与flex-wrap: wrapon结合使用.container.container

.container {
  display: flex;
  flex: 1;
}

hr {
  flex-grow: 1;
  /* width: 100%; */ /* or this */
}

<div class='container'>
    <hr>
</div>

Answer 2

这样做的原因是默认值align-itemsis stretchsohr将在flex-container或 在这种情况下获得与最大元素相同的高度h2。和默认值justify-content是flex-start这样的宽度hr为0。

解决这个问题的简单方法是flex-wrap: wrap在父元素flex: 0 0 100%上使用hr

.container {
  display: flex;
  flex-wrap: wrap;
}
hr {
  flex: 0 0 100%;
}

<div class='container'>
  <h2>Test</h2>
  <hr>
</div>