如何实现按钮与卡片/容器底部对齐？[HTML/CSS]

我是首次发帖，还请各位手下留情。我一直尝试让卡片中的按钮对齐到卡片底部，使页面视觉效果更美观，但始终未能成功。我当前使用Flexbox布局，有人提到Grid布局更适合垂直场景，这或许是问题所在。我试过绝对定位及一些Flexbox解决方案，但要么无效，要么会破坏整个卡片布局。

以下是我的代码及效果说明：

HTML代码 #

<main>
  <div id="main-welcome">
    <h1 id="main-title">THIS WILL BE A BIG NONE SWEAR WORD TITLE</h1>
  </div>
  <section>
    <div class="column card-style">
      <div class="card-text">
          <div id="img-container">
          <i class="fa-solid fa-user" style="color: #ff91a4;"></i>
        </div>
          <div class="title-contain">
              <h1 id="cardTitle">About Me</h1>
          </div>
        <p class="ellipsis">Learn more about me and find links to all my socials you could ever need!</p>
      </div>
      <div class="wrap">
        <button class="button">ABOUT ME</button>
      </div>
    </div>
    <div class="column card-style">
      <div class="card-text">
        <div id="img-container">
          <i class="fa-solid fa-tree" style="color: #ff91a4;"></i>
        </div>
          <div class="title-contain">
              <h1 id="cardTitle">Join the sub server!</h1>
          </div>
          <!--Add social icon infront off title-->
        <p class="ellipsis">
          Do you want to join a Minecraft sub server? Ofcourse you do! Register now if it is your first time here! Or add a vouncher if your subscription has run out!
        </p>
      </div>
      <div class="wrap">
        <button  class="button">REGISTER NOW</button>
        <button class="button">Add vouncher</button>
      </div>
    </div>
    <div class="column card-style">
      <div class="card-text">
        <div id="img-container">
          <i class="fa-solid fa-map" style="color: #ff91a4;"></i>
        </div>
          <div class="title-contain">
              <h1 id="cardTitle">View the server map!</h1>
          </div>
        <p class="ellipsis">See a map of the server where you can spot biomes, structures, houses and players live location!</p>
      </div>
      <div class="wrap">
        <button class="button">View the map</button>
      </div>
    </div>
    <div class="column card-style">
      <div class="card-text">
          <div class="title-contain">
              <img id="title-img" src="assets/free-youtube-logo-icon-2431-thumb.png" alt="">
              <h1 id="cardTitle">youtube</h1>
          </div>
        <p class="ellipsis">watch some fire tiktoks i made.</p>
      </div>
    </div>
  </section>
</main>

CSS代码 #

/* css cards */

section {
  display: flex;
  flex-flow: row wrap;
  z-index: 4;
  padding-top: 12%;
  padding-left: 15%;
  padding-right: 15%;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 1;
}

p, a {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
 nav > div > a {
  text-decoration: none;
  font-weight: 600;
  color: #ff91a4;
}
.title-contain {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: -1rem;

}
#title-img {
  width: 2rem;
  height: 2rem;
  padding-right: 0.5rem;
}

#cardTitle {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  font-size: 28px;
}
#img-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

figure {
  margin: 0px;
}

figure img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

figure img:hover {
  opacity: 0.6;
  transition: all .3s linear;
}
.column {
  box-sizing: border-box;
  flex: 1 100%;
  justify-content: space-evenly;
  margin: 20px;
  flex-shrink: 0;
  flex-grow: 1;
  z-index: 4;
}
.card-style {
  background-color: rgb(27, 27, 27);
  border-radius: 12px;
  border-image-slice: 1;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  transition: all 0.25s linear;

  z-index: 4;
}
.card-style:hover {
  box-shadow: -1px 10px 29px 0px rgba(0, 0, 0, 0.8);
  z-index: 4;
}

.card-text {
  color: white;
  padding: 20px;
}

@media (min-width: 500px) {
  .column {
      flex: 0 0 calc(100%/2 - 40px);
  }
}

@media (min-width: 900px) {
    .column {
      flex: 0 0 calc(100%/4 - 40px);
  }
}
/*Button css*/
.wrap {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;

}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: white;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #ff91a4;
  box-shadow: 0px 15px 20px #cf5e71;
  color: white;
  transform: translateY(-4px);
}

效果说明：我希望所有卡片的按钮都对齐到红色框标注的底部位置，且按钮与底部的间距保持一致

解决方案 #

不用切换到Grid布局，通过修改Flexbox属性就能实现需求，只需调整以下两处样式：

1. 给卡片容器设置垂直方向的Flex布局，并让卡片占满可用高度：

.card-style {
  /* 保留原有样式 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 让卡片文本区域自动填充剩余空间，这样按钮区域会被“挤”到卡片底部：

.card-text {
  /* 保留原有样式 */
  flex: 1;
}

修改后所有卡片会自动保持相同高度，按钮区域固定在底部且间距统一，没有按钮的卡片也会自然填充高度，不会破坏原有布局。

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