如何將文本與彈性基礎項目的底部對齊？

Question

我想將.second段落上的文本對齊為底部對齊。 我必須設置margin-top: auto來將整個元素對齊到底部，但是文本仍然對齊到該元素的頂部，並且我需要在.second上方.second一個空格。 flex-basis提供了我所需的額外空間和min-height ，而沒有固定的邊距。

如何在flex-basis項目內垂直對齊文本？

 .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

使其也成為flex容器，並使用align-items: flex-end將內容推送到底部。

堆棧片段

 .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

給display: flex和align-items: flex-end到.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>