在flexbox中对齐底部 [英] Aligning to the bottom in flexbox
本文介绍了在flexbox中对齐底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有容器，应根据内容动态更改高度。对于给定行中的所有容器，底部文本应该全部固定到底部，而不管每个容器的内容如何。
$ b
.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;宽度：100％; flex-list .flex-row .flex-item-wrapper：last-child {margin-right：0px; background-color：yellow;}。 background-color：transparent;}。flex-list .flex-row .flex-item-wrapper .flex-item {width：100％; height：100％;}。flex-item-stats {display：flex;证明内容：空间之间;颜色：灰色; 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 clickabledata-href =＃> < img class =img-circlesrc =http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpgstyle =width：150px> < div class =caption> < H4> < a href =＃> Y-find< / a> < / H4> < div class =flex-item-stats> <小>左< /小> <小>右< /小> < / DIV> < / DIV> < / DIV> < / DIV> < div class =flex-item-wrapper> < div class =flex-item thumbnail clickabledata-href =＃> < img class =img-circlesrc =http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpgstyle =width：150px> < div class =caption> < H4> < a href =＃> Cardguard Namfix< / a> < / H4> < div class =flex-item-stats> <小>左< /小> <小>右< /小> < / DIV> < / DIV> < / DIV> < / DIV> < div class =flex-item-wrapper> < div class =flex-item thumbnail clickabledata-href =＃> < img class =img-circlesrc =http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpgstyle =width：150px> < div class =caption> < H4> < a href =＃> Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch< / a> < / H4> < div class =flex-item-stats> <小>左< /小> <小>右< /小> < / DIV> < / DIV> < / DIV> < / DIV> < div class =flex-item-wrapper> < / DIV> < / div>< / div>
显示：flex 在 .caption 以及 space-between 会努力推动 flex-item-stats 到底部，但它似乎没有做任何事情。
解决方案
$ b $
.flex-list .flex-row .flex-item-包装.flex-item {
width：100％;
身高：100％;
display：flex; / * new * /
flex-direction：column; / * new * /
}
然后，告诉。
.caption {flex：1; }
这是一个常见的问题。以下是其他的弹性选项：
- 对齐Flex项目
- Flexbox对齐到底部
- 将弹性项目的内容与底部对齐
- < Flexbox难以将图标对齐到容器底部 /stackoverflow.com/q/36873419/3597276\">平等高度的列，并将最后一项对齐到底部
- 插入元素（弹性项目）到容器底部
- 使用flex将项目对齐到底部
- 嵌套的flexbox，align-items不是flex-end
- align-content：flex-end不会将元素移动到容器底部 com / q / 35020265/3597276>为什么不对齐自我对齐到我的flexbox的底部？
I'm have containers that should change height dynamically depending on the content. For all containers in a given row, the bottom text should all be fixed to the bottom regardless of content in each one's container.
.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>
I thought using display:flex on .caption along with space-between would work to push flex-item-stats to the bottom but it doesn't seem to be doing anything.
解决方案
You need to make the parent a flex container:
.flex-list .flex-row .flex-item-wrapper .flex-item {
width: 100%;
height: 100%;
display: flex; /* new */
flex-direction: column; /* new */
}
Then, tell the .caption element to fill available height:
.caption { flex: 1; }
It's a common question. Here are other flex options:
- Methods for Aligning Flex Items
- Flexbox align to bottom
- Align content of flex items to bottom
- Flexbox difficulties aligning icons to bottom of container
- Equal height columns and align last item to bottom
- Pin element (flex item) to bottom of container
- Aligning items to the bottom using flex
- Nested flexbox, align-items do not flex-end
- align-content: flex-end not shifting elements to container bottom
- Why isn't align-self aligning my div to the bottom of my flexbox?
这篇关于在flexbox中对齐底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
