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

Posted 2023-03-05

【中文标题】将弹性项目固定到容器的底部

【英文标题】：Pin a flex item to the bottom of the container

【发布时间】：2018-01-15 06:51:04

【问题描述】：

我有 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

【参考方案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

【讨论】：

感谢@Michael_B 提供了这么好的解释。如果我想在此代码笔上添加第二个 div 以固定在底部怎么办 Codepen link with 2 divs pinned to bottom 似乎不适用于 margin-top: auto。有没有办法来解决这个问题？我应该打开一个新问题还是您可以在这里回复？我对***很陌生。谢谢。

将 margin-top: auto 留在您希望底部对齐的顶部 div 上。这将隔开上面的所有物品，并打包下面的所有物品。删除另一个margin-top: auto。如果您将其留在底部项目上，它将尝试与正上方的项目隔开。 codepen.io/anon/pen/WEpGWg

非常感谢。你救了我的一天！如果我有更多问题，我肯定会在将来回复你。这个带有margin-top：auto的东西，现在对我来说是一个先生。我看到了一些关于它的东西，读过它，但从未理解它。我还找到了一些extra explanation about here。也许对其他人也有用。祝你有美好的一天！

我的答案中的第二个链接提供了对 flex 自动边距的完整且易于理解的解释。