我有 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代码在这里 https://codepen.io/nicutor/pen/KvWdJX
由于您正在使用行方向弹性容器，因此不可能将最后一个项目固定到底部。你正在处理交叉轴空间分布，这意味着伸缩线要么被拉伸，要么被压缩，并且无法将两个项目固定在顶部，一个固定在底部（除非您超越 Flexbox 并使用绝对定位）。
这是完整的解释。
- flex-wrap 如何与align-self、align-items 和align-content 配合使用？ https://stackoverflow.com/q/42613359/3597276
使布局工作的一个简单而有效的方法是在最后一项上使用弹性自动边距的列方向容器。通过将您的物品对齐主轴您可以将单个物品分开。
以下是 Flex 自动边距的解释：
- 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？ https://stackoverflow.com/q/32551291/3597276
/* 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>
修改后的代码笔 https://codepen.io/anon/pen/EvWyLp
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
