设置不同flex-direction的inline-flex元素垂直对齐异常求助

问题分析 #

使用display: inline-flex的元素默认采用**基线对齐（baseline）**规则。当两个inline-flex容器分别设置flex-direction: row和flex-direction: row-reverse时，内部元素的排列顺序反转会改变容器自身的基线位置，进而导致两个容器在垂直方向上错位。

解决方案 #

给所有.swiper-navigation元素添加vertical-align: middle属性，强制容器以垂直中线对齐，替代默认的基线对齐：

.swiper-navigation {
  /* 原有样式 */
  display: inline-flex;
  background-color: #001440;
  color: #fff;
  border: 1px solid #001440;
  padding: 0 15px;
  font-size: 24px;
  height: 70px;
  font-family: serif;
  cursor: pointer;
  z-index: 2;
  gap: 10px;
  justify-content: center;
  align-items: center;
  /* 新增垂直对齐规则 */
  vertical-align: middle;
}

也可根据布局需求选择vertical-align: top或vertical-align: bottom，同样能解决对齐问题。

原理说明 #

vertical-align: middle会让inline/inline-block/inline-flex元素的垂直中线与父元素的基线加上x-height的一半对齐，无论内部flex元素的排列方向如何，容器本身的垂直位置都会保持一致，从根源上避免了基线变化导致的错位。

完整代码示例 #

CSS #

.swiper-navigation {
  display: inline-flex;
  background-color: #001440;
  color: #fff;
  border: 1px solid #001440;
  padding: 0 15px;
  font-size: 24px;
  height: 70px;
  font-family: serif;
  cursor: pointer;
  z-index: 2;
  gap: 10px;
  justify-content: center;
  align-items: center;
  vertical-align: middle; /* 新增垂直对齐属性 */
}

.swiper-navigation__fraction strong {
  color: #c8103e;
}

.swiper-navigation__arrow {
  fill: white;
  height: 20px;
  width: 20px;
}

.swiper-navigation--next {
  flex-direction: row;
}

.swiper-navigation--prev {
  flex-direction: row-reverse;
}

.swiper-navigation--prev .swiper-navigation__arrow {
  transform: rotate(180deg);
}

.swiper-navigation:hover {
  background-color: #fff;
  color: #001440;
}

.swiper-navigation:hover .swiper-navigation__arrow {
  fill: #001440;
}

HTML #

<div class="swiper-navigation swiper-navigation--prev" tabIndex="0" role="button">
  <div class="swiper-navigation__fraction">
    01<strong>/</strong>03
  </div>
  <svg class="swiper-navigation__arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
  </svg>
</div>
<div class="swiper-navigation swiper-navigation--next" tabIndex="0" role="button">
  <div class="swiper-navigation__fraction">
    03<strong>/</strong>03
  </div>
  <svg class="swiper-navigation__arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
  </svg>
</div>

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