如何在flex容器中对齐<hr>元素？寻求非absolute定位方案

嘿，这个问题我之前也踩过坑！其实是<hr>元素的默认样式和flex布局的交互在搞鬼，给你几个不用position: absolute的靠谱解决方案：

方案1：用align-self强制对齐 #

flex容器的align-items是统管所有子元素的对齐规则，但我们可以给<hr>单独设置align-self: flex-start来覆盖全局规则，这样它就会和其他元素一起左对齐了：

hr {
  position: relative;
  display: block;
  background: white;
  height: 3px;
  width: 75px;
  margin-left: 0;
  align-self: flex-start; /* 新增这行 */
}

方案2：重置<hr>的默认margin #

很多浏览器会给<hr>默认设置margin: 1em auto，这会让它自动居中。你可以把margin改成仅保留上下间距，左右设为0，这样它就会跟着flex容器的对齐规则走：

hr {
  position: relative;
  display: block;
  background: white;
  height: 3px;
  width: 75px;
  margin: 1em 0; /* 替换原来的margin-left:0 */
}

方案3：用div替代<hr> #

如果觉得<hr>的默认样式太顽固，直接用一个div来模拟水平线反而更省心，div作为flex子元素的表现会更符合预期：

HTML修改： #

<div class="box">
  <h1> Hello </h1>
  <div class="hr-line"></div>
  <p> Thanks </p>
</div>

CSS新增： #

.hr-line {
  background: white;
  height: 3px;
  width: 75px;
}

个人最推荐方案1，改动最小，直接解决问题～

内容的提问来源于stack exchange，提问作者pjk_ok