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

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 space 分布，这意味着柔性线要么被拉伸要么被压缩，并且无法将两个项目固定到顶部，一个固定到底部（除非你超越 flexbox 并使用绝对定位）。

这里有完整的解释。

使您的布局正常工作的一种简单有效的方法是在最后一项上使用弹性自动边距的列方向容器。通过在主轴上对齐您的项目，您可以 space 离开单个项目。

这里是对 flex auto 边距的解释：

/* 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

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

Pin a flex item to the bottom of the container

html

css

vertical-alignment

flexbox