html - flexbox 将元素对齐到指定的基线？

Question

我想知道当您使用 flexbox 并尝试使用 align-items: baseline 时是否有一种方法可以覆盖/指定基线。

我有一个 flex 容器，其中包含几个不同的 div(即标题、图片、正文、描述)。

对于这些 flex 元素，我想以 .flex-body 的 div 基线为中心。它应该以“居中”文本的下划线为中心。

这就是我目前的尝试产生的结果。

我希望它看起来像这样，其中每一行都有以“这里的中心”下划线为中心的 flex 元素 --- 没有完美排列，因为我只是在那里添加边距以使图片看起来有点像就像我想要的那样:P

如果我需要将元素与基线对齐，我如何使用它使我的 flex div 居中到元素中间的下划线？

codepen

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 400px;
  height: 350px;
  background-color: lightgrey;
  flex-wrap: wrap;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.flex-body {
  border-bottom: 1px solid #fff;
}
.flex-img {
  justify-content: center;
  align-items: center;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="flex-title">
      flex title1
    </div>
    <div class="flex-img">
      <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
    </div>
    <div class="flex-body">
      center here
    </div>
    <div class="flex-body-more">
      more text
    </div>
  </div>
  <div class="flex-item">
    <div class="flex-title">
      flex title1 longer title

    </div>
    <div class="flex-img">
      <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
    </div>
    <div class="flex-body">
      center here
    </div>
    <div class="flex-body-more">
      more text
    </div>
  </div>
  <div class="flex-item">
    <div class="flex-title">
      flex title1
    </div>
    <div class="flex-img">
      <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
    </div>
    <div class="flex-body">
      center here
    </div>
    <div class="flex-body-more">
      more text more text more text
    </div>
  </div>
  <div class="flex-item">
    <div class="flex-title">
      flex title1
    </div>
    <div class="flex-img">
      <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
    </div>
    <div class="flex-body">
      center here
    </div>
    <div class="flex-body-more">
      more text
    </div>
  </div>
  <div class="flex-item">
    <div class="flex-title">
      flex title1
    </div>
    <div class="flex-img">
      <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
    </div>
    <div class="flex-body">
      center here
    </div>
    <div class="flex-body-more">
      more text
    </div>
  </div>

</div>

Answer 1

您可以:

• 将 flex 元素的内容包装在 inline-block 中

  那是因为 baseline inline-block 的位置非常有趣:

  The baseline of an 'inline-block' is the baseline of its last line box in the normal flow

  <div class="flex-item">
    <div class="inner-wrapper">
      <!-- contents here -->
    </div>
  </div>
  

  .inner-wrapper {
    display: inline-block;
  }
  

• 将内容 float 到所需的基线之后

  这样在计算基线时它们将被忽略，因为 float 是 out-of-flow .这有一些sideway effects ，因为 inline-block 包装器建立了 block 格式化上下文，所以得到了缓解。

  如果有多个，可以清除它们或使用 width: 100% 来防止它们水平堆叠。

  .flex-body-more {
    float: left; /* Take out-of-flow */
    clear: left; /* Do not stack horizontally */
    width: 100%; /* Do not shrink-to-fit */
  }
  

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 400px;
  height: 350px;
  background-color: lightgrey;
  flex-wrap: wrap;
}
.inner-wrapper {
  display: inline-block;
  text-align: center;
  width: 100px;
  margin: 10px;
  background-color: cornflowerblue;
}
.flex-body {
  border-bottom: 1px solid #fff;
}
.flex-body-more {
  float: left;
  clear: left;
  width: 100%;
}
.flex-img {
  justify-content: center;
  align-items: center;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1 longer title</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text more text more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
</div>