我的容器应该根据内容动态改变高度。对于给定行中的所有容器，底部文本都应固定在底部，无论每个容器中的内容如何。
.flex-list {
display: flex;
flex-direction: column;
}
.flex-list .flex-row {
display: flex;
margin-bottom: 20px;
}
.flex-list .flex-row .flex-item-wrapper {
margin-right: 20px;
width: 100%;
background-color: yellow;
}
.flex-list .flex-row .flex-item-wrapper:last-child {
margin-right: 0px;
background-color: transparent;
}
.flex-list .flex-row .flex-item-wrapper .flex-item {
width: 100%;
height: 100%;
}
.flex-item-stats {
display: flex;
justify-content: space-between;
color: grey;
padding-top: 10px;
}
.flex-item-stats > * {
display: flex;
flex-direction: column;
align-items: center;
}
.caption {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="profile-content flex-list">
<div class="flex-row">
<div class="flex-item-wrapper">
<div class="flex-item thumbnail clickable" data-href="#">
<img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">
<div class="caption">
<h4>
<a href="#">Y-find</a>
</h4>
<div class="flex-item-stats">
<small>left</small>
<small>right</small>
</div>
</div>
</div>
</div>
<div class="flex-item-wrapper">
<div class="flex-item thumbnail clickable" data-href="#">
<img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">
<div class="caption">
<h4>
<a href="#">Cardguard Namfix</a>
</h4>
<div class="flex-item-stats">
<small>left</small>
<small>right</small>
</div>
</div>
</div>
</div>
<div class="flex-item-wrapper">
<div class="flex-item thumbnail clickable" data-href="#">
<img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">
<div class="caption">
<h4>
<a href="#">Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch </a>
</h4>
<div class="flex-item-stats">
<small>left</small>
<small>right</small>
</div>
</div>
</div>
</div>
<div class="flex-item-wrapper">
</div>
</div>
</div>
我想用display:flex on .caption随着space-between会努力推动flex-item-stats到了底部，但它似乎没有做任何事情。
jsfiddle https://jsfiddle.net/qkf1yjLb/
您需要将父级设置为弹性容器：
.flex-list .flex-row .flex-item-wrapper .flex-item {
width: 100%;
height: 100%;
display: flex; /* new */
flex-direction: column; /* new */
}
然后，告诉.caption填充可用高度的元素：
.caption { flex: 1; }
修订版小提琴 https://jsfiddle.net/qkf1yjLb/4/
这是一个常见问题。以下是其他选项：
- 对齐 Flex 项目的方法 https://stackoverflow.com/a/33856609/3597276
- Flexbox 与底部对齐 https://stackoverflow.com/q/35866238/3597276
- 将弹性项目固定到容器的底部 https://stackoverflow.com/q/45555815/3597276
- 将元素（弹性项目）固定到容器底部 https://stackoverflow.com/q/33114716/3597276
- 将元素固定到容器底部 https://stackoverflow.com/q/42137339/3597276
- 将按钮固定到容器的底角 https://stackoverflow.com/q/45603237/3597276
- 使用 Flexbox 将元素与底部对齐 https://stackoverflow.com/q/48218246/3597276
- 使用 flex 将项目与底部对齐 https://stackoverflow.com/q/35440234/3597276
- 将 Flex 项目的内容与底部对齐 https://stackoverflow.com/q/38125562/3597276
- 将弹性容器中的内容与底部对齐 https://stackoverflow.com/q/40618012/3597276
- 使用 Flexbox 将元素与底部对齐 https://stackoverflow.com/q/48218246/3597276
- 嵌套的弹性盒，对齐项目不弹性结束 https://stackoverflow.com/q/36899952/3597276
- align-content：flex-end 不将元素移动到容器底部 https://stackoverflow.com/q/37913807/3597276
- 带有弹性盒的粘性页脚 https://stackoverflow.com/q/50429737/3597276
- 为什么align-self 没有将我的div 与弹性盒的底部对齐？ https://stackoverflow.com/q/35020265/3597276
- 如何使弹性项目内的元素底部对齐？ https://stackoverflow.com/q/44950502/3597276
- Flexbox 难以将图标与容器底部对齐 https://stackoverflow.com/q/33216604/3597276
- 在react-native中使用flex使项目粘在底部 https://stackoverflow.com/q/38887069/3597276
- 等高列并将最后一项与底部对齐 https://stackoverflow.com/q/36873419/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
