1

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


Please Suggest.
Thanks in advance

VegaStudios
  • 378
  • 1
  • 4
  • 22
  • Possible duplicate of [How can I make my flexbox layout take 100% vertical space?](https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space) – Abhishek Kumar Aug 16 '18 at 04:02
  • Please add your code into snippet, So someone has quickly fixed your issue. – jaydeep patel Aug 16 '18 at 04:12
  • @AbhishekKumar I don't believe that produces the desired fix [updated image](https://imgur.com/a/m8n1gCO) – VegaStudios Aug 16 '18 at 04:21
  • Possible duplicate of [Align an element to bottom with flexbox](https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) – mfluehr Sep 18 '19 at 13:42

4 Answers4

6

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • This works @Paulie_D...the answer lied in adding `flex: 1;` to `uni-card-body`, coupled with adding `margin-top:auto;` to the last div. Thanks man, +1 – VegaStudios Aug 16 '18 at 21:27
0

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!

Akbar Soft
  • 1,028
  • 10
  • 19
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>

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

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

Aspirer
  • 21
  • 6
  • Thanks for the response man, this code however, wasn't a responsive solution as the `height` property breaks the container bounds, and that property is required to align the item to the bottom of the container. – VegaStudios Aug 16 '18 at 22:14
-1

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>
Dharmesh Vekariya
  • 1,138
  • 2
  • 13
  • 31
khalid J-A
  • 574
  • 1
  • 7
  • 19
  • This is actually the closest answer to a solution...will keep exploring @khalidJ-A and report back. – VegaStudios Aug 16 '18 at 04:58
  • After trying, the `height` property made this solution non-responsive. I ultimately went with the above suggestion from @Paulie_D – VegaStudios Aug 16 '18 at 22:15
  • height property i assumed to display the gray bar. you can use top:92%; instead of the height property anyway I wish you the best luck – khalid J-A Aug 17 '18 at 07:22