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

【问题标题】：Aligning the last div to the bottom of a flexbox将最后一个 div 对齐到 flexbox 的底部
【发布时间】：2019-01-22 23:04:57
【问题描述】：

场景：

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

案例：

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

代码：

<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>

定价层

请提出建议。
提前致谢

【问题讨论】：

How can I make my flexbox layout take 100% vertical space?的可能重复
请将您的代码添加到sn-p中，所以有人很快解决了您的问题。
@AbhishekKumar 我不相信这会产生所需的修复 updated image
Align an element to bottom with flexbox的可能重复

标签： html css flexbox responsive

【解决方案1】：

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

.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>

【讨论】：

这有效@Paulie_D...答案在于将flex: 1; 添加到uni-card-body，并在最后一个div 中添加margin-top:auto;。谢谢伙计，+1

【解决方案2】：

1-设置父div相对位置不带top & left & right & 底部属性

2-设置最后一个div的绝对位置为bottom:0;right:0;left:0;height:36px;

<style>
  .pricing__tier {
    position:relative;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 0%;
    flex: 1;
  }
  .pricing__tier>.vat-fee-text {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    height:36px;
  }
 </style>

【讨论】：

这实际上是最接近解决方案的答案...将继续探索@khalidJ-A 并报告。
尝试后，height 属性使此解决方案无响应。我最终接受了@Paulie_D 的上述建议
height 属性我假设显示灰色条。你可以使用top:92%；无论如何，而不是 height 属性，我祝你好运

【解决方案3】：

.uni-card-body {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background: yellow;
  height: 90vh;
}

.uni-row-on.card-vat-fee {
  align-self: flex-end;
  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>

我已经在 sn-p 中说明了这件事，它会有所帮助。

注意：内容对齐、背景和高度仅用于演示，不是必需的。

【讨论】：

感谢您的响应，但是此代码不是响应式解决方案，因为 height 属性打破了容器边界，并且需要该属性才能将项目与容器底部对齐.

【解决方案4】：

请试试这个：

.uni-card-body {
        display: flex;
        flex-direction: column;
        width: 'for example' 700px;
    }
    .uni-row-on.card-vat-fee{
    align-self: flex-end;
}

希望对你有所帮助！

【讨论】：

这不是响应式解决方案