如何让所有卡片按钮统一居底？已用flex布局仍未生效

我希望将所有卡片的按钮统一对齐到卡片底部，目前已为卡片主体设置display:flex与flex-direction:column属性，且为卡片按钮设置了margin-top:auto，但按钮仍未定位至底部。我不想手动逐个调整按钮的外边距，希望找到可批量设置的解决方法。以下是我的卡片代码结构：

<section class="container">
            <div class="card">
                <div class="card-img card-1"></div>
                <div class="card-content">
                    <h2 class="card-header">Bayanihan E-Konsulta</h2>
                    <p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
                    <button class="card-btn">Read more<span>&rarr;</span></button>
                </div>
            </div>

            <div class="card">
                <div class="card-img card-2"></div>
                <div class="card-content">
                    <h2 class="card-header">Swab Cab</h2>
                    <p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
                    <button class="card-btn card-btn-2">Read more<span>&rarr;</span></button>
                </div>
           </div>

           <div class="card">
            <div class="card-img card-3"></div>
                <div class="card-content">
                    <h2 class="card-header">Free PPEs for HCWs</h2>
                    <p class="card-text">Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
                    <button class="card-btn">Read more<span>&rarr;</span></button>
                </div>
            </div>

            <a href="#title" class="secondary-btn">BACK TO TOP</a>

        </section>

问题出在flex布局的层级和空间分配没到位。你大概率只给card-content加了flex属性，但没让整个card容器统一高度，也没让card-content占满卡片的剩余空间，导致margin-top:auto无法生效。按下面的CSS批量设置就能解决：

/* 统一所有卡片的布局，确保高度一致 */
.card {
  display: flex;
  flex-direction: column;
  /* 可选：设置最小高度保证卡片不会太矮，或用flex:1让卡片在网格/弹性布局中自动填充 */
  min-height: 480px; 
}

/* 让卡片内容区占满卡片剩余空间，并启用垂直flex布局 */
.card-content {
  display: flex;
  flex-direction: column;
  flex: 1; /* 核心：让content区填满card中除图片外的所有空间 */
  padding: 1.2rem; /* 根据你的设计调整内边距 */
}

/* 保留按钮的margin-top:auto，现在就能自动推到底部 */
.card-btn {
  margin-top: auto;
}

关键逻辑说明： #

• 给.card加flex column布局后，所有卡片会保持统一高度（通过min-height或在父容器的网格/弹性布局中自动适配），避免因内容多少导致高度参差不齐。
• .card-content的flex:1属性会强制它占据卡片内的剩余空间，这样content内部的flex布局才能正常发挥作用，让margin-top:auto把按钮推到底部。
• 这种方式完全是批量设置，不用逐个调整任何卡片的样式。

如果你的卡片是用Grid布局排列的，可以给父容器.container加这段代码，效果会更流畅：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

内容的提问来源于stack exchange，提问作者Anthony Renzo Ferrer