仅用HTML CSS Flexbox实现等高卡片按钮对齐故障排查

我尝试用Flexbox让卡片里的按钮保持相同的外边距/高度起始位置，但没成功。按钮类上设置的align-self: flex-start;完全被忽略，调试后仍未解决。

相关代码 #

CSS代码

.card figure {
  justify-content: center;
  display: flex;
}

.row {
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
  flex-wrap: wrap;
}

.card {
  width: calc(33.33% - 1.875rem);
  background: #fff;
  /*border: 1px solid #E2E2E2;*/
  margin: 3.125rem 0;
  transition: 0.3s;
}

.card-header {
  text-align: center;
  padding: 1.875rem 1.25rem;
  color: var(--zwart);
}

.card-body {
  padding: 1.875rem 1.25rem;
  text-align: center;
}

.card-body .btn {
  display: block;
  margin: auto;
  width: 80%;
  color: var(--zwart);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--zwart);
  border-radius: 35px;
  margin-top: auto;
  padding: 0.625rem 0.312rem;
  transition: 0.3s;
  margin-top: auto;
  align-self: flex-start;
}

.card-body .btn:hover {
  background: var(--zwart);
  color: var(--wit);
}

.card:hover {
  box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);
}


/* Responsive media queries */

@media screen and (max-width: 1000px) {
  .card {
    width: 80%;
  }
}

@media screen and (max-width: 420px) {
  .heading {
    padding: 20px;
    font-size: 30px;
  }
  .card {
    width: 80%;
  }
}

HTML代码

<div class="container">
  <div class="row">
    <div class="card">
      <figure>
        <img src="assets/partners.svg" alt="card 1">
      </figure>
      <div class="card-header">
        <h4>Operationele partners</h4>
      </div>
      <div class="card-body">
        <p>
          Voor courante activiteiten met de olie- en opslagsector werkt APETRA met raamovereenkomsten. U vindt hier ook alle informatie over onze andere activiteiten en overheidsopdrachten.
        </p>
        <a href="#" class="btn">Lees meer</a>
      </div>
    </div>

    <div class="card">
      <figure>
        <img src="assets/crisisbeleid.svg" alt="card 1">
      </figure>
      <div class="card-header">
        <h4>Crisisbeleid</h4>
      </div>
      <div class="card-body">
        <p>
          De algemene principes, veelgestelde vragen en hun antwoorden en de wetgeving m.b.t. het aardolierisisbeleid.
        </p>
        <a href="#" class="btn">Lees meer</a>
      </div>
    </div>

    <div class="card">
      <figure>
        <img src="assets/bijdrage.svg" alt="card 1">
      </figure>
      <div class="card-header">
        <h4>Bijdrage</h4>
      </div>
      <div class="card-body">
        <p>
          Op de hoogte blijven van de bijdrage: op welke producten wordt ze geheven en wie betaalt deze?
        </p>
        <a href="#" class="btn">Lees meer</a>
      </div>
    </div>
  </div>
</div>

问题截图 #

解决方案 #

问题核心是**align-self仅对Flex容器的直接子元素生效**，当前按钮的父元素.card-body是块级元素，且卡片本身未设置Flex布局，导致按钮无法对齐。调整步骤如下：

1. 将.card设为垂直方向的Flex容器，让所有卡片高度一致：

.card {
  width: calc(33.33% - 1.875rem);
  background: #fff;
  margin: 3.125rem 0;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

2. 将.card-body设为垂直Flex容器，让它占满卡片剩余空间：

.card-body {
  padding: 1.875rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

3. 简化按钮样式，利用margin-top: auto让按钮自动顶到底部，同时用align-self: center保证水平居中：

.card-body .btn {
  display: block;
  width: 80%;
  color: var(--zwart);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--zwart);
  border-radius: 35px;
  margin-top: auto;
  padding: 0.625rem 0.312rem;
  transition: 0.3s;
  align-self: center;
}

调整后所有卡片高度统一，按钮会自动对齐到卡片底部，解决起始位置不一致的问题。

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