flexbox将项目对齐到指定的基线？

Posted 2023-03-05

【中文标题】flexbox将项目对齐到指定的基线？

【英文标题】：flexbox align item to specified baseline?

【发布时间】：2017-01-04 22:18:17

【问题描述】：

我想知道在您使用 flexbox 并尝试使用 align-items: baseline 时是否有办法覆盖/指定基线。

我有一个 flex 容器，其中包含几个不同的 div（即标题、img、正文、描述）。

有了这些弹性项目，我想以具有.flex-body 的 div 的基线为中心。它应该以“居中”文本的下划线为中心。

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

我希望它看起来像这样，其中每一行都有以“此处中心”下划线为中心的弹性项目 --- 没有完全对齐，因为我只是在那里粘贴边距以使图片看起来有点像就像我想要的一样：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>

【参考方案1】：

你可以：

将弹性项目的内容包裹在inline-blocks中

那是因为inline-block 的baseline 处于一个非常有趣的位置：

'inline-block' 的基线是其最后一个行框的基线 在正常流程中

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

.inner-wrapper 
  display: inline-block;

在所需基线之后浮动内容

这样在计算基线时它们将被忽略，因为浮点数是out-of-flow。这有一些sideway effects，因为inline-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>

【讨论】：

非常复杂！ Flexbox、浮动和inline-block 都在一个地方。并且实际上使用最深埋的规范语言（实际上是实际的最后一行）进行inline-block 基线对齐。最后，有人将其投入使用 :-) 干得好。

@Michael_B 谢谢 :) 为不同类型的框设置不同的基线使得 CSS WG 难以标准化 CSS align 中的连贯内容，但允许一些类似的技巧。

非常感谢！在过去的几天里，我一直在为这个问题撞墙:)