我想知道在使用flexBox时是否有办法覆盖/指定基线并尝试使用align-items：baseline.

我有一个flex容器,它包含几个不同的div(即title,img,body,description).

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

这就是我目前的尝试.

我希望它看起来像这样,每一行都有以“中心在这里”下划线为中心的弹性项目 – 没有完美排列,因为我只是在那里粘贴边缘以使图像看起来像我的样子通缉：P

如果将项目与基线对齐是我需要的,我如何使用它将我的flex divs置于项目中间的下划线？

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;
}@H_502_24@
@H_502_24@

最佳答案
您可以：

>将flex项目的内容包装在内联块中
那是因为内联块的baseline处于一个非常有趣的位置：


The baseline of an ‘inline-block’ is the baseline of its last line Box

  in the normal flow

@H_502_24@
.inner-wrapper {
  display: inline-block;
}
@H_502_24@
>在所需基线后浮动内容
这样在计算基线时它们将被忽略,因为浮点数是out-of-flow.这有一些sideway effects,这是因为内联块包装器建立块格式化上下文而被缓解.
如果您有多个,可以清除它们或使用宽度：100％以防止它们水平堆叠.

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

.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;
}@H_502_24@
@H_502_24@


      
alignment
      
                 

        
上一篇：html  – 如何将一个元素放在另一个下一篇：如何在HTML中创建部分水平线？