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 .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 */
}

另请注意：

• 删除时不存在问题，align-items: center因为默认值是stretch，它允许文本在基线（即第一行）跨框对齐，而不管行数（演示）
• flex-start也可以（演示）
• flex-end不会（演示）

更多详情vertical-align: baseline：

• 如果父子高度相同，为什么会出现垂直滚动条？