align-items：中心扭曲父级的高度

Question

我想构建一个旋转木马之类的东西，您可以使用滚动条进行滑动。在每张幻灯片中，都有一行文本应该水平和垂直居中。 设置align-items: center 会改变父div 的高度。

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

注释掉align-items 就可以了。我应该如何解决这个问题？

Answer 1

问题不是align-items: center。这一切都很好。

问题在于您的 flex 容器是一个内联级框 (display: inline-flex)，它会激活 vertical-align: baseline 默认设置。

由于您的中间项有两行文本，因此框会调整其基线以与其兄弟项对齐。 （请注意，当每个框都有一行文本时，它们是如何排列的。）

只需使用 vertical-align: bottom 覆盖默认值即可。

.carousel .slide {
    vertical-align: bottom;
}

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
  vertical-align: bottom;  /* NEW */
}

<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

另请注意：

• 删除align-items: center后问题不存在，因为默认值为stretch，它允许文本在框的基线（即第一行）对齐，而不管行数如何（@987654321 @)
• flex-start 也可以使用 (demo)
• flex-end 不会 (demo)

更多关于vertical-align: baseline的详情：

• Why is there a vertical scroll bar if parent and child have the same height?