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

Question

Scenario :

• I'm creating a pricing comparison table and am having difficulties aligning the last div, card-vat-fee , to the bottom of the container.
• I need to do this because the tiers have longer running lists than one another, causing the last div isn't aligned with the bottom of the container.
• How can I get the last div to align to the bottom of the flexbox?

Tried Case :

• Of course, if I set a min-height: 320px; on the card-vat-fee class it will align the div to the bottom, however this isn't a responsive solution and I feel like there is a better approach that uses flex properties. Moreover, setting the card-vat-fee div to flex-grow, flex: 1 1 auto , produces an unideal solution .

Code :

<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

Please Suggest.
Thanks in advance

Answer 1

Use margin-top:auto on the last 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> 

Answer 2

1- set the parent div relative position without top & left & right & bottom property

2- set the last div position absolute with 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>

Answer 3

plaesa try this one :

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

Ihope this will help you!

Answer 4

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

I've illustrated the thing in the snippet, it'll help.

Note: Content justification, background and height are for demonstration and not necessary.