如何使用flex水平显示hr？

Question

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

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

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

- Noah Passalacqua

Answer 1

使用flex-grow: 1或者width: 100%让元素与其父元素宽度相匹配。如果你计划在.container中放置更多的flex子元素，可能需要将.container上的flex-wrap: wrap与之结合使用。

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

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

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

- Michael Coker

Answer 2

这是因为align-items的默认值为stretch，所以hr的高度将与flex-container中最大元素的高度相同，或者在这种情况下是h2。而justify-content的默认值是flex-start，所以hr的宽度为0。

解决这个问题的简单方法是在父元素上使用flex-wrap：wrap，并在hr上使用flex：0 0 100％。

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

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

- Nenad Vracar

---

这应该是被接受的答案 - 被接受的答案对我没用。 - J.E.C.