使用flex布局将hr水平线转为垂直方向的实现问题咨询

问题原因 #

你缺少两个核心配置：

• 未覆盖<hr>的默认样式，浏览器自带的<hr>默认是水平分割线属性，不修改的话无法直接在flex容器中展示为垂直样式
• 未给<hr>设置flex子项的拉伸规则，无法自动撑开垂直方向高度

修复后的完整代码 #

CSS部分 #

.outer-div {
  background-color: aqua;
}

.inner-div {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}

/* 新增hr垂直分割线样式 */
.inner-div hr {
  /* 清除默认的水平边框 */
  border: none;
  /* 分割线宽度 */
  width: 1px;
  /* 自动撑满flex容器垂直方向高度 */
  align-self: stretch;
  /* 分割线颜色可按需调整 */
  background-color: #666;
  /* 左右留间距避免贴住内容 */
  margin: 0 15px;
}

HTML部分和原有代码一致 #

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<div class="outer-div">
  <div class="inner-div">
    <div class="details-div">
      <i class="fas fa-band-aid">I</i>
      <span>Get Details</span>
    </div>
    <hr />
    <div class="call-div">
      <i class="fas fa-band-aid">I</i>
      <span>Call Customer Care</span>
    </div>
  </div>
</div>

核心配置说明 #

• align-self: stretch是flex布局下实现垂直hr的核心，作为flex子元素的hr设置该属性后，会自动沿垂直方向撑满父容器的高度，不需要手动写固定高度
• 重置border、设置固定宽度和背景色是为了覆盖浏览器默认的hr水平样式，改为垂直线条的表现
• 左右margin可以根据实际设计需求调整，避免分割线和两侧内容紧贴

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