将弹性项目固定到容器的底部

Question

我有 4 个块，分别是标题、描述和按钮。

我想保持标题和描述在顶部对齐，而按钮在底部对齐，无论描述或标题有多长。

我还需要保持相同的 HTML 结构。

我实际需要的示例图片：

有人能解决吗？到目前为止，我还没有在互联网上找到解决方法。

/* FLEXBOX RELATED */
.grid {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.block {
  flex: 0 24%;
  display: flex;
}
.container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.title {
  flex: 0 100%;
}
.desc {
  flex: 0 100%;
}
.button {
  flex: 0 100%;
  align-self: flex-end;
}


/* NO FLEXBOX RELATED */
.block {
  background-color: #ccc;
}
.title {
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}
.desc {
  background-color: grey;
  padding: 0.5rem;
}
.button {
  padding: 0.5rem;
  color: blue;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="block">
    <div class="container">
      <div class="title">Title 1</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 2</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 3</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 4</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
</div>

The codepen code is here

Answer 1

由于您使用的是行方向弹性容器，因此无法将最后一项固定到底部。您正在处理 cross axis 空间分布，这意味着 flex 线要么被拉伸要么被打包，并且没有办法将两个项目固定在顶部和一个固定在底部（除非你超越了 flexbox 和使用绝对定位）。

这是一个完整的解释。

• How does flex-wrap work with align-self, align-items and align-content?

让您的布局工作的一种简单而有效的方法是在最后一项上使用 flex 自动边距的列方向容器。通过在主轴上对齐您的项目，您可以分隔各个项目。

下面是对 flex 自动边距的解释：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

/* FLEXBOX RELATED */
.grid {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.block {
  flex: 0 24%;
  display: flex;
}
.container {
  display: flex;
  flex-direction: column; /* new */
  /* flex-flow: row wrap; */
  /* align-items: flex-start; */
}
.title {
  /* flex: 0 100%; */
}
.desc {
  /* flex: 0 100%; */
}
.button {
  margin-top: auto; /* new */
  /* flex: 0 100%; */
  /* align-self: flex-end; */
}


/* NO FLEXBOX RELATED */
.block {
  background-color: #ccc;
}
.title {
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}
.desc {
  background-color: grey;
  padding: 0.5rem;
}
.button {
  padding: 0.5rem;
  color: blue;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="block">
    <div class="container">
      <div class="title">Title 1</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 2</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 3</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
  <div class="block">
    <div class="container">
      <div class="title">Title 4</div>
      <div class="desc">Description Description Description Description Description Description Description Description Description Description</div>
      <div class="button">Button</div>
    </div>
  </div>
</div>

revised codepen