针柔性项目到容器底部针柔性项目到容器底部(Pin a flex item to the bottom

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

该codepen代码是在这里

既然你有行方向弯曲容器的工作，钉扎的最后一项的底部是不可能的。你在处理交叉轴的空间分布，这意味着弯曲线，要么拉长或包装的，而且也没有办法针两个项目的顶部，一个在底部（除非你超越Flexbox，就和使用绝对定位）。

下面是一个完整的解释。

如何与对齐自柔性包装工作，对准项和调整内容？

一个简单而有效的方法，使您的布局工作将与最后一个项目柔性自动利润率列方向容器。通过在主轴线你可以走的空间单个项目对准您的项目。

这里的柔性自动利润率的解释：

在CSS Flexbox的，为什么没有“证明项”和“证明自我”的属性？

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

修订codepen