我的容器应该根据内容动态改变高度。对于给定行中的所有容器,无论每个容器中的内容如何,底部文本都应固定在底部。
.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>
我认为在 .caption
上使用 display:flex
以及 space-between
可以推送 flex-item-stats
到底部,但它似乎没有做任何事情。
最佳答案
你需要让父容器成为一个 flex 容器:
.flex-list .flex-row .flex-item-wrapper .flex-item {
width: 100%;
height: 100%;
display: flex; /* new */
flex-direction: column; /* new */
}
然后,告诉 .caption
元素填充可用高度:
.caption { flex: 1; }
这是一个常见的问题。以下是其他选项:
- Methods for Aligning Flex Items
- Flexbox align to bottom
- Pin a flex item to the bottom of the container
- Pin element (flex item) to bottom of container
- Pin element to the bottom of the container
- Pin a button to the bottom corner of a container
- Aligning element to bottom with flexbox
- Aligning items to the bottom using flex
- Align content of flex items to bottom
- Align content in a flex container to the bottom
- Aligning element to bottom with flexbox
- Nested flexbox, align-items do not flex-end
- align-content: flex-end not shifting elements to container bottom
- Sticky footer with flexbox
- Why isn't align-self aligning my div to the bottom of my flexbox?
- How to bottom-align an element inside a flex item?
- Flexbox difficulties aligning icons to bottom of container
- Make an item stick to the bottom using flex in react-native
- Equal height columns and align last item to bottom
关于html - 对齐到 flexbox 中的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38639889/