如何用CSS Flex/Grid实现无绝对定位的水平列表垂直对齐

核心需求 #

• 不使用position: absolute、transform: translate这类脱离文档流的定位属性
• 优先使用CSS Grid、Flexbox实现布局，兼容父容器padding，支持容器根据内容自动撑开，可结合max-content适配自适应高度场景
• 解决带图片/徽章的列表项中，文本垂直居中偏移的问题：纯文本列表项可直接用居中对齐，但叠加图片元素后，全局设置居中会导致所有列表的文本无法处于同一水平位置
• 最终布局目标：不同高度的列表项配图靠项内底部对齐，所有列表的公共文本部分保持对齐，不因为图片高度差异错开文本位置

现有实现的问题 #

1. 初始尝试版本：列表容器直接设置align-items: center，带图片的列表项因为图片本身高度比纯文本高，会把文本位置挤得靠下，无法实现所有列表文本的统一垂直对齐
2. 后续优化版本：为了对齐文本，给列表项设置了grid-template-rows: 1fr max-content 1fr的三行网格结构，中间行放文本实现居中，但图片部分使用绝对定位靠右下角放置，违反了不脱离文档流的要求

满足约束条件的实现思路 #

核心利用Grid的弹性行轨道分配能力，不需要空占位块、不需要绝对定位：

• 列表容器保持Flex横向排布，取消全局的align-items: center设置，使用默认的align-items: stretch让所有列表项自动撑满和最高子项一致的高度
• 每个列表项内部使用Grid双行轨道结构：
  • 第一行轨道设置为弹性填充的1fr，用来放置图片/徽章元素，轨道内的元素对齐方式设为靠底部，自动贴到和文本相邻的位置
  • 第二行轨道设置为max-content高度，专门放置文本内容
• 第一行的1fr轨道会自动填满列表项除文本行之外的剩余高度，图片靠行底部对齐，实现「图片占满上方剩余空间、靠下贴住文本」的视觉效果，全程不脱离文档流

核心实现代码 #

CSS #

.list {
  width: 100%;
  background: red;
  display: flex;
  flex-direction: row;
  align-items: stretch; /* 所有列表项自动撑满同高，替代原来的居中对齐 */
}

.list-item {
  background: yellow;
  display: grid;
  /* 第一行：弹性填充剩余高度，放置图片元素；第二行：内容高度，放置文本 */
  grid-template-rows: 1fr max-content;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.image-wrapper {
  align-self: end; /* 关键：让图片靠所在网格行的下边缘对齐，替代绝对定位 */
  max-width: 100%;
}

.image-wrapper img {
  display: block;
  max-width: 100%;
}

.text {
  white-space: nowrap;
  margin-top: 0.5rem; /* 可自定义调整图片和文本的间距 */
}

HTML #

<div class="list">
  <!-- 纯文本列表项：空元素占第一行轨道，由1fr弹性高度实现文本自动居中 -->
  <div class="list-item">
    <div></div>
    <div class="text">list item 1</div>
  </div>
  <!-- 带配图的列表项 -->
  <div class="list-item">
    <div class="image-wrapper">
      <img class="image" src="https://via.placeholder.com/100" />
    </div>
    <div class="text">list item 2</div>
  </div>
  <div class="list-item">
    <div class="image-wrapper">
      <img class="image" src="https://via.placeholder.com/150" />
    </div>
    <div class="text">list item 3</div>
  </div>
</div>

方案适配特性 #

• 所有元素均处于正常文档流内，未使用绝对定位、变形类定位属性，完全兼容父容器的padding规则
• 网格第二行使用max-content定义高度，完全匹配开发习惯，文本行不会因为内容变化被意外拉伸压缩
• 容器高度可根据最高的带图列表项自动撑开，无需写死固定高度，适配内容动态变化的场景
• 纯文本列表项没有图片元素时，第一行的1fr轨道会均匀分配剩余高度，让文本自动处于垂直居中位置，和带图列表项的文本位置保持严格对齐
• 图片不管实际尺寸多大，只要在网格第一行内靠底部对齐，就不会把文本位置挤偏

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