如何使用flex水平显示hr？

Question

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

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

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

Answer 1

原因是align-items的默认值为stretch，因此hr将获得与flex-container中最大元素相同的高度，或者在这种情况下{{1} }}。 h2的默认值为justify-content，因此flex-start的宽度为0.

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

＆＃13;

＆＃13;

hr

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flex-grow: 1或width: 100%，以便它会增长以匹配父级的宽度。如果您打算在flex-wrap: wrap

中添加更多灵活儿童，您可能希望将其与.container上的.container结合使用

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;