React中如何确保Flex布局项的底部间距保持统一

问题核心是卡片内容区域未采用弹性布局，导致短内容卡片的按钮无法固定在底部。通过以下样式调整即可解决：

1. 改造卡片内容区域为垂直弹性布局 #

修改StyledCard的样式，让卡片内部的内容容器（.ant-card-body）使用垂直方向的flex布局，并占满卡片高度，确保内部元素能自动分配空间：

const StyledCard = styled(Card)`
  .ant-card-cover img {
    aspect-ratio: 12/10;
  }
  .ant-card-meta-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  height: 100%;
  /* 新增：让卡片内容区域垂直弹性布局 */
  .ant-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
`;

2. 让描述区域填充剩余空间 #

给CardMeta添加flex-grow:1属性，让描述部分自动占据卡片内容区域的剩余空白，把按钮推到卡片底部：

const CardMeta = styled(Meta)`
  justify-content: space-between;
  /* 新增：填充剩余空间 */
  flex-grow: 1;
`;

3. 固定按钮的底部间距 #

调整StyledLink的样式，设置底部内边距来保证按钮与卡片底部的间距为24px：

const StyledLink = styled(Link)`
  display: flex;
  margin-top: 16px;
  /* 新增：设置底部间距 */
  padding-bottom: 24px;
`;

完整修改后的关键代码片段 #

const CardMeta = styled(Meta)`
  justify-content: space-between;
  flex-grow: 1;
`;

const StyledCard = styled(Card)`
  .ant-card-cover img {
    aspect-ratio: 12/10;
  }
  .ant-card-meta-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  height: 100%;
  .ant-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
`;

const StyledLink = styled(Link)`
  display: flex;
  margin-top: 16px;
  padding-bottom: 24px;
`;

修改完成后，无论卡片内描述内容长短，「Click Me」按钮都会固定在卡片底部，保持统一的24px底部间距。

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