CSS Flexbox - 顶部对齐内容，底部对齐按钮

Question

我正在尝试修改继承了 Flexbox 概念的现有组件。

目前看起来是这样的：

现在我想要实现的是不管盒子内的内容大小：

盒子将具有相同的高度 - 彼此对齐
即使顶部内容很长，按钮也会留在底部。

这是我要修复的现有结构：

<section class="container counsellor-list">
  <div class="row">
    <div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
      <div class="state_chosen">
          <img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
          <div class="bg-blue20 p-30 counsellor-list-item-content">
              <div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
              <span class="">
                  Wien
              </span>
              <span class="ml-16">
                  St. Polten
              </span>
              <span class="ml-auto language">
                  <span>
                  DE
                  <span> | </span>
                  EN
                  </span>
              </span>
              </div>
              <h2 class="mb-24">Jan Faustio</h2>
              <div class="">
              <a class="btn btn-coral" href="#"> Button </a>
              </div>
          </div>
      </div>
  </div>
  ...
</section>

Codepen link

我尝试了很多东西，但没有像我期望的那样工作 be/result。

Answer 1

检查这个，我希望我理解你想要实现的目标https://codepen.io/IvanBisultanov/pen/PoQmXqX

我还添加了 .btn-wrap 类名，并将上面的所有 HTML 包装在 div

中

.counsellor-list-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.btn-wrap {
  margin-top: auto;
}

CSS Flexbox - 顶部对齐内容，底部对齐按钮

CSS Flexbox - Align the contents on top and align the button to bottom

css

flexbox