html - 将div元素与容器底部对齐

This question already has answers here:

Align an element to bottom with flexbox
（5个答案）
三年前关闭。
我正试图将容器中的三个div之一底部对齐，但我遇到了一些问题。
如您所见，如果我尝试在bottom-aligneddiv上使用绝对定位，那么高度就成了一个问题。
我可以设置一个特定的高度，但是cta-itemdiv中的内容可以从非常小到非常大。
我试图为所有用例创建一个解决方案。
我知道我可以使用jQuery获得最大的cta-itemdiv的高度并进行相应的调整，但是我尽量避免使用jQuery/JS。
我用我现在拥有的创造了一个小提琴。
提前谢谢你！

.dynamic-cta-ctr {
  display: flex;
}
.dynamic-cta-ctr .cta-item {
  flex: 1;
  text-align: center;
  padding: 0 30px;
  position: relative;
  border-right: 1px solid #555;
}
.dynamic-cta-ctr .cta-item:last-child {
  border-right: none;
}
.dynamic-cta-ctr .cta-item .bottom-aligned {
  /* position: absolute;
  bottom: 0; */
}

<div class="dynamic-cta-ctr">
  <div class="cta-item">
    <div class="heading-text"><h3>Some content</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
</div>

最佳答案

将此添加到代码中：

.cta-item {
   display: flex;
   flex-direction: column;
}

.bottom-aligned {
    margin-top: auto;
}

revised fiddle
更多详情请点击：Methods for Aligning Flex Items