如何将文本与弹性基础项目的底部对齐？

Question

I would like to align text on the .second paragraph to be bottom-aligned. I have to set margin-top: auto to align the whole element to the bottom, but the text still aligns to the top of that element, and I need a space above .second . flex-basis provides extra space and the min-height that I needed without having a fixed margin.

How to vertically align text inside a flex-basis item?

 .column{ display: flex; flex-direction: column; } h1{ flex-basis: 70px; } .second{ flex-basis: 80px; background-color: red; margin-top: auto; } 

 <div class="column"> <h1>Subscribe</h1> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p> <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> 

Answer 1

Make it also a flex container and use align-items: flex-end to push content to the bottom.

Stack snippet

 .column{ display: flex; flex-direction: column; } h1{ flex-basis: 70px; } .second{ flex-basis: 80px; background-color: red; margin-top: auto; display: flex; /* added */ align-items: flex-end; /* added */ } 

 <div class="column"> <h1>Subscribe</h1> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p> <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> 

Answer 2

Give display: flex and align-items: flex-end to the .second div :

 .column { display: flex; flex-direction: column; } h1 { flex-basis: 70px; } .second { display: flex; align-items: flex-end; flex-basis: 80px; background-color: red; margin-top: auto; } 

 <div class="column"> <h1>Subscribe</h1> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p> <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>