对齐flexbox底部

我有容器，应根据内容动态更改高度。对于给定行中的所有容器，底部文本应全部固定到底部，而不管每个容器中的内容如何。对齐flexbox底部

.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>

我想用在.captiondisplay:flex与space-between一起将努力推动flex-item-stats的底部，但它似乎没有被做任何事情。

jsfiddle

来源

2016-07-28 user4584963

你需要让父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; }

Revised Fiddle

这是一个共同的追求离子。以下是其他flex选项：

来源

2016-07-28 14:58:17

如果您改变.caption代码：

.caption { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

，然后添加：

.flex-item { 
    display: flex; 
    flex-direction: column; 
}

来源

2016-07-28 15:07:07

对齐flexbox底部

回答

相关问题