如何在Flex-Grid中将Button元素底部对齐？多种尝试未奏效

Grid 方案（你已验证可行的方式） #

这种方式通过给第二列单独设置网格行，让按钮自动被推到底部：

1. 外层容器使用 Grid 布局，确保两列等高
2. 第二列内部也用 Grid，将行分为「占满剩余空间」和「自适应内容」两行

<div class="grid-container">
  <div class="column column-1">
    <p>第一列的内容，可能包含多行文本、图片等元素，高度会自动撑开</p>
  </div>
  <div class="column column-2">
    <p>第二列的内容，高度比第一列短</p>
    <button>底部对齐按钮</button>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列平分宽度，可按需调整 */
  gap: 1.25rem; /* 列间距 */
}

.column-2 {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满剩余空间，第二行自适应按钮高度 */
  gap: 0.625rem;
}

Flexbox 方案（解决你之前未找到的实现方式） #

Flexbox 同样可以轻松实现，核心是给按钮设置margin-top: auto，让它自动顶到底部：

1. 外层容器用 Flex 布局，保证两列等高
2. 第二列内部设置垂直方向的 Flex 布局，通过自动外边距实现按钮底部对齐

<div class="flex-container">
  <div class="column column-1">
    <p>第一列的内容，可能包含多行文本、图片等元素，高度会自动撑开</p>
  </div>
  <div class="column column-2">
    <p>第二列的内容，高度比第一列短</p>
    <button>底部对齐按钮</button>
  </div>
</div>

.flex-container {
  display: flex;
  gap: 1.25rem;
}

.column {
  flex: 1; /* 两列平分宽度 */
}

.column-2 {
  display: flex;
  flex-direction: column; /* 垂直排列内部元素 */
  gap: 0.625rem;
}

.column-2 button {
  margin-top: auto; /* 自动顶开上方空间，实现底部对齐 */
}

为什么 position 方案容易失效？ #

用position: absolute + relative的方式，需要给父容器设置position: relative，但按钮会脱离文档流：

• 如果父容器没有固定高度，可能出现按钮溢出容器的情况
• 响应式布局下按钮位置容易错乱，维护成本更高，不如 Grid 和 Flex 的方案稳定可控

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