Flex布局容器中等高盒子内如何实现按钮div底部对齐

最终实现代码 #

CSS部分 #

.rowDisplay {
  display: flex;
  /* 确保子元素自动撑满容器高度，维持等高效果 */
  align-items: stretch;
}
.outerbox {
  border: 1px solid black;
  /* 盒子内部启用垂直方向flex布局 */
  display: flex;
  flex-direction: column;
}
/* 消除图片底部默认留白 */
.outerbox img {
  display: block;
}
/* 包裹文本和按钮的容器样式 */
.contentWrapper {
  /* 占满图片以外的所有剩余高度 */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.textClass {
  /* 文本默认顶对齐，可按需调整内边距 */
  padding: 8px;
}
.buttonClass {
  /* 自动填充上方剩余空间，将按钮固定到底部 */
  margin-top: auto;
  padding: 8px;
  text-align: center;
}

HTML部分 #

仅需给原结构中无类名的中间嵌套div添加contentWrapper类即可：

<div className="rowDisplay">
  <div className="outerbox">
    <img src="path/to/image" alt="示例图">
    <!-- 新增contentWrapper类 -->
    <div className="contentWrapper">
      <div className="textClass">
          {text}
      </div>
      <div className="buttonClass">
          <Button onClick={this.handleClickFunction}>
                Click Me
          </Button>
      </div>
    </div>
  </div>
  <!-- 第二个outerbox结构完全一致 -->
</div>

实现逻辑说明 #

1. 外层.rowDisplay的align-items: stretch属性维持了你原本的盒子等高效果
2. 每个.outerbox设置为垂直flex布局后，内部的图片、内容容器会按垂直方向依次排列
3. 内容容器设置flex-grow:1后会自动填充图片以外的所有剩余高度，自身也设置为垂直flex布局
4. 按钮容器添加margin-top: auto后，会自动占据上方所有剩余空间，自然固定在盒子底部，文本则始终保持在图片下方顶部对齐，完全匹配需求。

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