對齊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底部

回答

相關問題