如何实现按钮对齐？多列布局下按钮错位问题求助

你的按钮无法对齐核心原因有两个：一是外层flex容器让卡片垂直居中，导致不同高度的卡片位置不一；二是卡片内部没有固定按钮的底部位置。直接按以下步骤修改代码就能解决：

1. 调整外层flex容器的对齐方式 #

把.flex-container的align-items从center改成stretch，让所有卡片容器强制拉伸到同一高度：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* 替换原align-items:center */
  align-content: center;
}

2. 让卡片内部使用flex垂直布局 #

修改.card的样式，把它变成flex垂直容器，并设置高度占满父容器：

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  border-radius: 10px;
  background-color: black;
  text-align: center;
  font-family: arial;
  display: flex; /* 添加flex布局 */
  flex-direction: column; /* 内部元素垂直排列 */
  height: 100%; /* 占满父容器高度 */
}

3. 让卡片内容占满剩余空间，把按钮推到底部 #

先给卡片里的文本、图标等内容套一个容器：

<div class="card">
  <img class="thumb" width="300" height="300" src="/Pages/games/wpnfire/wpnfire.jpg" alt="#" />
  <div class="card-content">
    <h1 style="color: white;">Text</h1>
    <p class="desc">Text</p>
    <div style="margin: 24px 0;"> <i class="fa-solid fa-keyboard"></i> </div>
  </div>
  <a class="game" href="/Pages/games/wpnfire/">Press to play</a>
</div>

然后给这个容器添加flex-grow:1，让它占满卡片的剩余空间：

.card-content {
  flex-grow: 1;
}

这样修改后，所有卡片会被拉伸到统一高度，内部内容自动填充剩余空间，按钮就会整齐对齐在每个卡片的底部了。

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