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

时间:2018-08-16 03:56:34

标签: html css flexbox responsive

场景:

  • 我正在创建一个定价比较表,但很难将最后一个div card-vat-fee与容器底部对齐。
  • 我需要执行此操作,因为这些层的运行列表比 互相导致最后一个div与底部不对齐 容器。
  • 如何使最后一个div对准flexbox的底部?

已尝试的情况:

  • 当然,如果我在min-height: 320px;类上设置了card-vat-fee,它将使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>

定价层 pricing tier


请提出建议。
预先感谢

5 个答案:

答案 0 :(得分:2)

在最后一个格上使用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>

答案 1 :(得分:0)

plaesa试试这个:

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

希望这会对您有所帮助!

答案 2 :(得分:0)

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

我已经在代码段中说明了这一点,它将有所帮助。

  

注意:内容的合理性,背景和高度仅用于演示,并非必需。

答案 3 :(得分:-1)

您可以通过指定“绝对位置”并设置“属性底部” 0px

答案 4 :(得分:-1)

1-设置父div的相对位置,不带上,左,右和     底层属性

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>