杂志风格布局中网格单元格按钮垂直对齐问题

我在搭建个人博客时遇到了垂直对齐的问题：需要把"Read more"按钮对齐到网格单元格的底部，同时标题不能被截断，文章预览内容要根据标题的长度自适应显示行数。目前只能通过把标题截断成一行来实现按钮对齐，附上问题截图和相关代码片段寻求解决办法。

解决方案：利用Flexbox实现自适应布局 #

核心思路是把每个文章卡片的容器改成垂直Flex布局，让内容区域自动填充剩余空间，从而将按钮固定在底部。

1. 修改卡片容器的Flex设置

调整.article__link的样式，让它占满网格单元格的全部高度，并设置垂直Flex布局：

.article__link {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保容器占满网格单元格高度 */
}

/* 保留原有的媒体查询设置，按需调整 */
@include media-query($small) {
  .article__link {
    flex-direction: column;
  }
}

2. 取消标题的截断限制

把.article__titles里的截断属性全部移除，让标题可以正常换行显示：

.article__titles {
  margin-bottom: $section-spacing-small / 2;
  line-height: 1.7rem; /* 保留行高保证排版美观 */
  /* 移除以下截断相关属性 */
  /* overflow:hidden; */
  /* max-height: 8rem; */
  /* -webkit-box-orient: vertical; */
  /* display: -webkit-box; */
  /* text-overflow: ellipsis; */
  /* -webkit-line-clamp: 1; */
}

3. 让预览内容自适应剩余空间

给.article__grid-excerpt添加flex-grow属性，让它填充标题和按钮之间的剩余空间，同时保留内容超出时的截断效果：

.article__grid-excerpt {
  margin-bottom: $section-spacing-small / 2;
  overflow:hidden;
  line-height: 1.7rem;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset; /* 取消固定行数，自适应剩余空间 */
  flex-grow: 1; /* 填充标题与按钮之间的剩余高度 */
  min-height: 0; /* 解决Flex容器中子元素溢出的问题 */
}

4. 固定按钮到单元格底部

给.article__meta-buttons添加margin-top: auto，确保按钮被推到底部：

.article__meta-buttons {
  margin-top: auto; /* 自动填充上方剩余空间，将按钮固定在底部 */
  li {
    &:first-child {
      margin-right: 1.5rem;
    }
  }
}

原理说明 #

通过将文章卡片容器设置为垂直Flex布局并占满网格高度，标题区域正常显示不截断，预览区域通过flex-grow自动填充标题和按钮之间的剩余空间，当预览内容超出该空间时会自动截断，最终实现按钮始终对齐到单元格底部的效果。

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