使用Flexbox使Div内不同文本居中并保持Div对齐的问题

我有3个设置为inline-block的外层div，当内部文本行数不同时，这些块会失去顶部对齐效果，出现顶部空白区域。

原因分析 #

• inline-block元素默认的垂直对齐方式是baseline（基线对齐）
• 单行文本的基线在文本底部，多行文本的基线在最后一行文本的底部，不同的基线位置导致外层inline-block元素的顶部无法对齐。

解决方法 #

给外层容器container-outer添加vertical-align: top属性，强制所有元素以顶部为基准对齐：

修改后的CSS代码 #

body {
  font: 36px Arial, sans-serif;
}
.container-outer {
  display: inline-block;
  vertical-align: top; /* 添加这行代码 */
}
.container {
  color: white;
  background: #ffbd17;
  width: 200px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  background: #06c;
}

对应HTML代码 #

<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1
    </div>
  </div>
</div>
<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1<br>
      Line 2
    </div>
  </div>
</div>
<div class="container-outer">
  <div class="container">
    <div class="content">
      Line 1
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者nunomira