如何在flexbox的同一行上对齐文本？答案

【问题标题】：How to align text on the same line in flexbox?如何在flexbox的同一行上对齐文本？
【发布时间】：2018-04-24 05:43:43
【问题描述】：

我使用 Flexbox 并排对齐了两个 div，我希望将两个 div 中的文本以相同的级别推到 div 的底部，但各个文本下方的间距似乎不同。

.wrapper {
  display: flex;
  flex-direction: row;
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block2 {
  font-size: 1em;
  color: grey;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block1.hack-fix {
  line-height: 29px; /* HACK */
}

<h2>Current:</h2>
<div class="wrapper">
  <span class="block1">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
  <span class="block1 hack-fix">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>

感谢您的帮助！

【问题讨论】：

这是行高问题，由于字体大小不同。去阅读相关的财产，developer.mozilla.org/en-US/docs/Web/CSS/line-height

标签： html css flexbox

【解决方案1】：

您要查找的内容称为基线对齐。

要在 flexbox 中实现这一点，请使用 align-items: baseline。

这里有一个更完整的解释：

What's the difference between flex-start and baseline?

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline; /* NEW */
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
}

.block2 {
  font-size: 1em;
  color: grey;
}

<div class="wrapper">
  <span class="block1">23</span>
  <span class="block2">Quote</span>
</div>

【讨论】：

【解决方案2】：

父母：

display: flex;

孩子们：

flex: 1;

【讨论】：