卡片/容器底部的中心按钮 [HTML/CSS]

Question

第一次发帖，请不要打我。我一直在尝试让我的按钮对齐卡片的所有底部，使其看起来更漂亮。我还不知道该怎么做。我使用 flexbox，这可能是我看到有人说网格更适合垂直的问题。不管这是我的代码和我的意思的一些图像。

<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);
}

我使用了这里建议的不同方法和绝对位置，甚至使用了一些 flexbox 解决方案，但似乎没有任何效果。或者它会破坏整张卡片。

Answer 1

通过查看 Chrome 的 devtool，我们可以注意到该卡虽然配置了 flex 指令，但并未使用：

您可以通过将卡片的显示设置为

flex

并调整方向和对齐来快速修复它：

.column {
    box-sizing: border-box;
    flex: 1 100%;
    margin: 20px;
    flex-shrink: 0;
    flex-grow: 1;
    z-index: 4;

    display: flex; # tell the browser engine to start using flex directives
    justify-content: space-between; # components will have space distributed between them, no space at the beginning or the end
    flex-direction: column; # components will come from top to bottom
}

现在应该看起来像这样：