如何在保持基线对齐的前提下将Flex行单元格内容整体向上偏移

以下是使用Flexbox构建的表格，行内单元格通过align-items: baseline属性实现对齐。

原有实现代码：

.data-row {
  display: flex;
  align-items: baseline;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  font: bold 14px monospace;
  min-height: 75px;
}

.data-row + .data-row {
  border-top: none;
}

.data-cell {
  padding: 30px 15px 15px;
}

.data-cell--text {
  flex-grow: 1;
}

<div class="data-row">
  <div class="data-cell">1111111</div>
  <div class="data-cell data-cell--text">通常单行文本即可容纳全部内容</div>
  <div class="data-cell">1111111</div>
  <div class="data-cell">1111111</div>
</div>

<div class="data-row">
  <div class="data-cell">2222222</div>
  <div class="data-cell data-cell--text">但部分单元格可能会出现长文本，导致内容换行到下一行</div>
  <div class="data-cell">2222222</div>
  <div class="data-cell">2222222</div>
</div>

需求：当单元格内的文本达到2行及以上时，该行所有单元格的内容都能向上移动，更靠近行的顶部，同时仍保持基线对齐效果。

解决方案 #

该需求可以实现，只需调整Flex的对齐层级，把基线对齐逻辑下沉到单元格内部即可，修改后的CSS如下：

.data-row {
  display: flex;
  /* 改为stretch让所有单元格撑满整行高度 */
  align-items: stretch;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  font: bold 14px monospace;
  min-height: 75px;
  box-sizing: border-box;
}

.data-row + .data-row {
  border-top: none;
}

.data-cell {
  padding: 15px 15px 15px;
  /* 单元格自身作为flex容器，控制内部内容基线对齐 */
  display: inline-flex;
  align-items: baseline;
}

.data-cell--text {
  flex-grow: 1;
}

实现原理

1. 行容器的align-items: stretch保证所有单元格高度和行高一致，保留原有的min-height:75px规则
2. 基线对齐逻辑从行容器下沉到单元格容器，所有单元格内部内容的第一行天然保持基线对齐
3. 统一的顶部内边距让内容始终靠近行顶部，不会出现单行文本内容大量留白的情况

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