Flexbox问题：实现带垂直居中内容的垂直分隔线

哈哈，这个坑我踩过！当你给flex容器加上align-items: center后，所有子元素默认都会垂直居中对齐，而你的垂直分隔线如果是普通的flex item，它的高度会被压缩到和其他内容一致，自然就“消失”了。别担心，两种简单方法就能搞定：

方法1：给分隔线单独设置align-self: stretch #

这种方法适合你已经单独写了分隔线元素的情况，核心是让分隔线忽略容器的align-items: center，自己拉伸到容器的垂直高度：

<div class="container">
  <div class="content-item">左侧内容</div>
  <span class="vertical-divider"></span>
  <div class="content-item">中间内容</div>
  <span class="vertical-divider"></span>
  <div class="content-item">右侧内容</div>
</div>

.container {
  display: flex;
  align-items: center; /* 让所有内容垂直居中 */
  justify-content: space-between; /* 内容左右均匀分布 */
  min-height: 60px; /* 可以给容器设置最小高度，或者由内容撑开 */
  padding: 0 15px;
  border: 1px solid #eee;
}

.content-item {
  /* 你的内容样式，比如字体、颜色等 */
  font-size: 14px;
}

.vertical-divider {
  width: 1px;
  background-color: #ccc;
  align-self: stretch; /* 关键属性！让分隔线撑满容器的垂直高度 */
  margin: 0 10px; /* 可选：给分隔线左右加间距，更美观 */
}

解释：align-self: stretch会覆盖容器的align-items: center配置，让分隔线元素的高度自动拉伸到和容器一致，这样就能看到清晰的垂直分隔线，同时其他内容依然保持垂直居中。

方法2：用伪元素生成分隔线（更简洁） #

如果不想额外添加分隔线元素，可以用伪元素来实现，同样能解决问题：

<div class="container">
  <div class="content-item">左侧内容</div>
  <div class="content-item">中间内容</div>
  <div class="content-item">右侧内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 15px;
  border: 1px solid #eee;
}

.content-item {
  font-size: 14px;
}

/* 给除了最后一个元素之外的所有内容添加右侧分隔线 */
.content-item:not(:last-child)::after {
  content: "";
  width: 1px;
  background-color: #ccc;
  align-self: stretch; /* 同样用这个属性让伪元素撑满高度 */
  margin: 0 10px;
}

这种方法不需要额外的HTML元素，代码更简洁，效果和方法1完全一致。

额外注意点 #

• 如果容器没有设置固定/最小高度，而是由内容自然撑开，align-self: stretch依然有效，因为容器的高度会取子元素中最高的那个，分隔线会自动拉伸到这个高度。
• 如果你用的是非flex布局（比如inline-block），那可能需要调整line-height或者vertical-align，但flex布局是当前最简便的解决方案，优先推荐。

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