Question

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

我有一个包含几个不同div的flex容器（即title，img，body，description）。

使用这些弹性项目，我想以.flex-body为中心的div的基线。它应该以这里中心的下划线为中心＆＃39;文本。

这是我目前的尝试。

我希望它看起来像这样，每一行的灵活项目都以＆＃34;中心为中心＆＃34;强调 - 并不完美排队，因为我只是在那里留下了边缘以使图片看起来像我想要的那样：P

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

codepen

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你可以：

将弹性项目的内容包裹在inline-block s
中
那是因为inline-block的{{3}}处于一个非常有趣的位置：

＆＃39;内联块的基线＆＃39;是其最后一个行框的基线在正常流程中
```
<div class="flex-item">
  <div class="inner-wrapper">
    
  </div>
</div>
```
```
.inner-wrapper {
  display: inline-block;
}
```
在所需基线
之后浮动内容
这种方式在计算基线时会被忽略，因为浮点数是baseline。这有一些out-of-flow，因为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 */
}
```

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: