将最后一个 div 对齐到 flexbox 的底部

Question

设想 ：

• 我正在创建一个价格比较表，但在将最后一个 div 对齐card-vat-fee到容器底部时遇到了困难。
• 我需要这样做是因为这些层的运行列表比彼此更长，导致最后一个 div 与容器底部不对齐。
• 如何让最后一个 div 与 flexbox 的底部对齐？

尝试案例：

• 当然，如果我min-height: 320px;在card-vat-fee类上设置 a它将使 div 与底部对齐，但这不是一个响应式解决方案，我觉得有一种更好的方法可以使用flex属性。此外，将card-vat-feediv设置为 flex-grow flex: 1 1 auto, 会产生不理想的解决方案。

代码 ：

<div class='pricing__tier'>
 <div class='uni-card-header'>
 </div>
 <div class='uni-card-body'>
   <div class='uni-row-on'>
   </div>
   <div class='uni-row-off'>
   </div>
   <div class='uni-row-on card-vat-fee'>
    <div class='vat-fee-text'>
     Credit card fees and VAT apply. See below for details.
    </div>
   </div>
 </div>
</div>
<style>
    .pricing__tier {
        padding: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 0%;
        flex: 1;
    }
    .uni-card-body {
        display: flex;
        flex-direction: column;
    }
</style>

定价层

请建议。
提前致谢

Answer 1

使用margin-top:auto的最后一个div。

.pricing__tier {
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 25%;
  flex: 1;
  height: 200px; /* for demo purposes */
  border: 1px solid grey;
}

.uni-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-vat-fee {
  margin-top: auto; /* push to bottom */
  background: green;
}

<div class='pricing__tier'>
  <div class='uni-card-header'>
  </div>
  <div class='uni-card-body'>
    <div class='uni-row-on'>
    </div>
    <div class='uni-row-off'>
    </div>
    <div class='uni-row-on card-vat-fee'>
      <div class='vat-fee-text'>
        Credit card fees and VAT apply. See below for details.
      </div>
    </div>
  </div>
</div>