当 flex-direction 设置为 column 时，如何使用 flexbox 将元素与 div 的底部对齐

Question

I know this question has been asked several times, but for some reason my isn't working. Can you guys please help me?I'm just trying to align all the buttons with all the cards because the tiles could have different lengths one, two or three lines, but I don't know why it's not working. Thanks!

 .cards { max-width: 1200px; display: flex; } .card { flex: 1; margin-right: 30px; } .content { display: flex; flex-direction: column; justify-content: space-between; } .pic { min-height: 20vh; background: blue; }

 <div class="cards"> <div class="card red"> <div class="pic"> </div> <div class="content"> <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1> <button>click here</button> </div> </div> <div class="card blue"> <div class="pic"> </div> <div class="content"> <h1>Lorem ipsum dolor sit ait. </h1> <button>click here</button> </div> </div> </div>

This is what I want to look like.

Answer 1

For use the justify-content: space-between; property, a height or width must be defined.

For flex-direction:column is must be defined height

 .cards { max-width: 1200px; display: flex; } .card { flex: 1; margin-right: 30px; } .content { display: flex; flex-direction: column; justify-content: space-between; height:200px; } .pic { min-height: 20vh; background: blue; }

 <div class="cards"> <div class="card red"> <div class="pic"> </div> <div class="content"> <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1> <button>click here</button> </div> </div> <div class="card blue"> <div class="pic"> </div> <div class="content"> <h1>Lorem ipsum dolor sit ait. </h1> <button>click here</button> </div> </div> </div>