使用flexbox将元素对齐到容器底部 [英] Use flexbox to align elements to bottom of container

问题描述

我有容器，应该根据内容动态改变高度。对于给定行中的所有容器，底部文本应该都固定在底部，而不管每个容器中的内容。

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>

display：flex on .caption 以及将工作推到 flex-item-stats 到底部，但似乎没有做任何事情。

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.

jsfiddle

推荐答案

您需要将父容器设为弹性容器：

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

然后，告诉。 caption 元素填充可用高度：

Then, tell the .caption element to fill available height:

.caption { flex: 1; }

修订的小提琴

这是一个常见问题。以下是其他Flex选项：

It's a common question. Here are other flex options:

• 对齐Flex项目


• Flexbox与底部对齐


• 将flex项目的内容对齐


• Flexbox难以将图标对齐到容器底部


• 等待高度列，将最后一个项目对齐到底部


• Pin元素（弹性项目）到容器底部


• 使用弹性将项目对齐到底部


• 嵌套的flexbox，align-items不是flex-end


• align-content：flex-end不会将元素移动到容器底


• 为什么align-self将我的div对齐到底部我的弹性盒？

• 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屋！