在 flexbox 中对齐到底部 [英] Aligning to the bottom in flexbox

查看：28
本文介绍了在 flexbox 中对齐到底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的容器应该根据内容动态改变高度.对于给定行中的所有容器，无论每个容器中的内容如何，​​底部文本都应固定在底部.

.flex-list {显示:弹性；弹性方向:列；}.flex-list .flex-row {显示:弹性；底边距:20px；}.flex-list .flex-row .flex-item-wrapper {右边距:20px；宽度:100%；背景颜色:黄色；}.flex-list .flex-row .flex-item-wrapper:last-child {边距右:0px；背景色:透明；}.flex-list .flex-row .flex-item-wrapper .flex-item {宽度:100%；高度:100%；}.flex-item-stats {显示:弹性；对齐内容:间隔；颜色:灰色；填充顶部:10px；}.flex-item-stats >* {显示:弹性；弹性方向:列；对齐项目:居中；}.标题 {显示:弹性；弹性方向:列；对齐内容:间隔；}

<div class="flex-row"><div class="flex-item-wrapper"><div class="flex-item 缩略图可点击" 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><div class="flex-item-stats"><小>左</小><小>右</小>

<div class="flex-item-wrapper"><div class="flex-item 缩略图可点击" 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><div class="flex-item-stats"><小>左</小><小>右</小>

<div class="flex-item-wrapper"><div class="flex-item 缩略图可点击" 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 Voyatouch </a><div class="flex-item-stats"><小>左</小><小>右</小>

<div class="flex-item-wrapper">

我认为在 .caption 上使用 display:flex 和 space-between 可以推动 flex-item-stats 到底部，但它似乎没有做任何事情.

jsfiddle

解决方案

你需要让父容器成为弹性容器:

.flex-list .flex-row .flex-item-wrapper .flex-item {宽度:100%；高度:100%；显示:弹性；/* 新的 */弹性方向:列；/* 新的 */}

然后，告诉 .caption 元素填充可用高度:

.caption { flex: 1;}

修正小提琴

这是一个常见的问题.以下是其他选项:

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.

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

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

.caption { flex: 1; }

Revised Fiddle

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

这篇关于在 flexbox 中对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆