如何用flex水平显示hr？答案

【问题标题】：How to display hr horizontally with flex?如何用flex水平显示hr？
【发布时间】：2023-03-20 05:47:02
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：